Вам наверняка уже попадались такие стильные всплывающие подсказки на страницах сайтов при наведении указателя мыши на какой-либо элемент. На самом деле это ни что иное как содержимое свойства title, которое обычно прописывается к ссылкам или картинкам. По-умолчанию браузеры сами показывают такие всплывающие подсказки, но делают это довольно просто и обыденно. Плагин jQuery Tooltip позволяет сделать это более динамично и красиво, а именно: он показывает плавно появляющуюся и затухающую подсказку, словно бы привязанную к указателю мыши и двигающуюся вслед за ним.
Для того, чтобы реализовать данный эффект, нужно скачать свежую версию библиотеки jQuery и до кучи сам плагин Tooltip. Подробнее с плагином Tooltip можно ознакомиться на сайте его автора J?rn Zaefferer-а bassistance.de
Оба скрипта подключаем по стандартной схеме, в пределах тэгов <head></head>:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
Далее там же сразу прописываем необходимый для работы плагина код:
<script type="text/javascript">
$(function() {
$('#tooltiper a').tooltip({
track: true,
delay: 0,
showURL: false,
fade: 200
});
});
</script>
Кусок кода $(’#tooltiper a’) показывает, что данный эффект будет применен для всех ссылок, входящих в блок с идентификатором #tooltiper. Ниже идет ряд настроек. Разберем их подробнее:
1. track. Значение true включает “привязку” подсказки к движущемуся указателю мыши. Обратное значение false, соответственно, выключает эту фишку и делает подсказку статичной.
2. delay. Задержка появления подсказки. Чем выше число, тем дольше она не появляется. Мельчить не стоит, тут счет идет на сотни миллисекунд. Пишется обычным числом: 0, 100, 200, 500, 1000 и т.д.
3. showURL. Значение true добавляет во всплывающую подсказку кроме самого текста из title еще и ссылку. Значение false, соответственно, это дело выключает.
4. fade. Затухание. От числового значения зависит скорость “проявления” и затухания подсказки.
Для правильной работы всплывающей подсказки необходимо в файл стилей добавить следующий набор правил:
#tooltip {
width: 200px;
position: absolute;
z-index: 10;
border: 1px solid #1593db;
background-color: #e5f5fe;
font: 1em verdana;
color: #000;
padding: 5px;
opacity: 0.75;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Селектор #tooltip — задан непосредственно в плагине Tooltip. Там же прописаны координаты появления всплывающей подсказки относительно указателя мыши. По-умолчания подсказка появляется ниже и правее указателя на 15 пикселов. Если захотите изменить ее местоположение, то вэлкам ковырять файл jquery.tooltip.js. Думаю, разберетесь, подсказок в нем предостаточно.
Ну а тем, кого устраивает данное размещение, расскажу лишь, что означают правила в приведенном выше наборе:
width: 200px; — задает фиксированную ширину всплывающей подсказки. Если ее не указывать, то ширина будет соответствовать количеству текста в подсказке, и перенос строки внутри нее будет зависеть лишь от ширины окна монитора.
position: absolute; — жестко привязан к настройкам, указанным в файле плагина. Если его не указывать, то подсказка будет появляться у левого края монитора.
z-index: 10; — подсказка должна появляться поверх контента. Значение 10 взято прозапас. Вполне можно ограничиться и единицей, так как все остальное у нас находится на “нулевом” слое.
Про свойства текста, фона и рамки рассказывать не буду, там и так все понятно.
opacity: 0.75; — задает прозрачность блока с подсказкой. Выглядит симпатично. Значение можно выставить любое, от 0.1 до 1.0
Парочка последних правил предназначена для закругления углов рамки. Одно заточено под браузеры а ля Firefox, другое для Safari и Chrome. В Опере и ИЕ они не работают.
Живой пример работы плагина jQuery Tooltip можно посмотреть здесь
Спасибо за подробное изложение! Давно искал понятный способ как сделать такие плавающие подсказки. Наконец то допер :))
Симпатишно, еще не юзал. Спасибо:))
отличные подсказки правдо с css3 но все равно))
вот еще нашел здесь без css3 http://prootime.ru/css-hint
Ничего не получилось =( Куда плагин сам кидать???
Как это куда? В шаблон конечно же!
Сегодня обнаружил интересную особенность работы tooltip, попробуйте, к примеру, вынести функцию $(function() {
$(’#tooltiper a’).tooltip({
track: true,
delay: 0,
showURL: false,
fade: 200
});
});
в отдельную функцию, например testfunc() и выполнить её 2 раза.
Зачем это нужно? Ну вот Вы к примеру “подргрузили” часть содержимого с помощью $.ajax() и в этом содержимом у Вас есть элементы, к которым тоже нужно применить tooltip. Как это сделать? ещё раз вызвать функцию testfunc().
Так вот после второго вызова у нового “вставленного” содержимого подсказки будут, а вот все старые исчезнут!
Решение заключается в другой конструкции:
$(’#tooltiper a’).each( function () {
if (this.title != ”) $(this).tooltip({
track: true,
delay: 0,
showURL: false,
fade: 200
});
});
В этом случае tooltip применится только к тем элементам, к которым он ещё не применялся. Тогда будут и новые и старые подсказки.
ecolora, интересное решение!
Спасибо, за доходчивую статью =).Вот только в 3 снизу строке написано что закруглённые уголки не отображаются в Opere…а это неправда!
Начиная с Opera 10.50 углы охотно закругляются без префиксов.Вот так:
border: 1px solid #000;
border-radius: 5px;
Верное замечание. В 10-ке работает, а в 9.63 нет. Так что ставьте 10-ю версию Оперы и будет вам счастье :)
Спвсибо, полезно. Но хорошо бы еще описать handler событий (OnShow, OnHide) и т.д. (узнал из других сайтов).
Андрей, все будет. В свое время :)