Всплывающие подсказки title на JQuery + CSS

Обычные всплывающие подсказки с текстом при наведении на какой-либо 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 для ссылок.



Комментировать

captcha

Сайты:



Новые отзывы о сайтах:

Авторизация

Если у Вас нет учетной записи, зарегистрируйтесь

captcha

Напомнить пароль
Создание учётной записи

captcha

Напомнить пароль

captcha

Войти в личный кабинет