Собственное поведение и вид подсказки title, это просто!

Подсказки (titles) для всех элементов страницы показываются 5 сек



Единственный параграф

Как сделать так же?

Для совсем начинающих рецепт такой:
скопируйте себе два javascript-файла: jquery.js и titles.js, расположите их где-то на своем сайте и в начале странички в заголовке (HEAD) поместите две строчки: 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="titles.js"></script>
соответственно правильно указывайте пути до файлов.
В таблицу стилей добавьте стиль для элемента с ID=title (см. ниже)
И все. Все элементы, имеющие атрибут title, будут вести себя так, как вы хотите.

Как это сделано?

В самом коде HTML ничего не меняется. Где требуется, задаются атрибуты title. Можно использовать символы "\n", для перевода строки, а также теги HTML для форматирования подсказки.
В качестве title используется элемент span c ID=title, которому изначально прописывается такой стиль: 
#title{
  position:absolute;
  display:block;
  border:1px solid black;
  background-color: #FFFFAA;
  color:black;
  padding:0px 3px 0px 3px;
  font-family:arial;
  font-size:12px;
}
Вы можете описать свой собственный стиль.
И совсем немного скрипта :) (не считая использованной библиотеки jQuery) 
var s_x=10, s_y=10; //смещения подсказки относительно курсора
var show_time=5000; // время в ms, которое будет показываться подсказка, если 0 - подсказка показывается всегда
var to;
$(document).ready(function(){ 
$(('<span id=title></span>')).appendTo('body').hide()

$('[title]').each(function(i,e){
  //запоминаем значение атрибута в свойстве _title
  //сам атрибут удаляем (чтобы браузер не показывал собственные подсказки)
  e._title=$(this).attr('title').replace(/\\n/gim,'<br>');
  $(this).removeAttr('title')
  
  .mouseover(function(evt){
    $('#title')
    .html($(this).get(0)._title)
    .fadeIn('slow').css({left:(evt.pageX+s_x)+'px', top:(evt.pageY+s_y)+'px'})
    if(show_time) to=setTimeout(hide_title, show_time)
  })
  .mouseout( hide_title )

  .mousemove(function(evt){
    $('#title').css({left:(evt.pageX+s_x)+'px', top:(evt.pageY+s_y)+'px'})
  });
})
})
function hide_title(){
  clearTimeout(to);
  $('#title').hide();
}
В качестве подсказки можно использовать не только просто span с текстом, но и любые другие элементы, например картинки.