Главная › Новости

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


Опубликовано: 05.09.2018

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

TIP - всплывающие подсказки на чистом CSS

Обычные всплывающие подсказки с текстом при наведении на какой-либо HTML элемент, чаще ссылку, можно сделать более эффективными и полезными для пользователей применив маленький jQuery скрипт и стилизацию CSS. Ниже приведен рабочий скрипт с пояснениями.


jQuery #6: всплывающая подсказка (tooltip)

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 для ссылок.


Пользовательские подсказки средствами jQuery

3792

rss