Обычные всплывающие подсказки с текстом при наведении на какой-либо HTML элемент, чаще ссылку, можно сделать более эффективными и полезными для пользователей применив маленький jQuery скрипт и стилизацию CSS. Ниже приведен рабочий скрипт с пояснениями.
JQuery скрипт для всплывающих подсказок
this.tooltip = function(){
xOffset = 0; // отступ по оси x от положения курсора
yOffset = 20; // отступ по оси y от положения курсора
$('a[title]').hover(function(e){
this.t = this.title;
this.title = "";
$("body").append(""+ this.t +"
");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.delay(800) // задержка в миллисекундах до появления подсказки
.fadeIn(200); // эффект постепенного проявления
},
function(){
this.title = this.t;
$("#tooltip").remove(); // удаляем подсказку при выходе курсора за пределы элемента
});
$('a[title]').mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px") // подсказа двигается за курсором
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
tooltip();
});
CSS стилизация
#tooltip {
position:absolute; /* позиция подсказки не привязана к другим элементам */
background:#FFF; /* цвет фона подсказки (белый) */
padding:3px; /* отступы (3 пикселя) */
display:none; /* делаем невидимой до обработки jQuery скриптом */
color:#666 /* цвет текста подсказки */
}
И самое приятное - в HTML коде ничего не нужно менять, скрипт обрабатывает все элементы <a href="ссылка" title="текст всплывающей подсказки"> считывая только атрибут title для ссылок.
