jQuery для чайников | Всплывающая подсказка | Плагин Tooltip
Вам наверняка уже попадались такие стильные всплывающие подсказки на страницах сайтов при наведении указателя мыши на какой-либо элемент. На самом деле это ни что иное как содержимое свойства title, которое обычно прописывается к ссылкам или картинкам.
По-умолчанию браузеры сами показывают такие всплывающие подсказки, но делают это довольно просто и обыденно. Плагин jQuery Tooltip позволяет сделать это более динамично и красиво, а именно: он показывает плавно появляющуюся и затухающую подсказку, словно бы привязанную к указателю мыши и двигающуюся вслед за ним.
Для того, чтобы реализовать этот эффект, нужно скачать свежую версию библиотеки jQuery и до кучи сам плагин Tooltip. Подробнее с плагином Tooltip можно ознакомиться на сайте его автора.
Оба скрипта подключаем по стандартной схеме, в пределах тэгов <head></head> вашего сайта:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
Далее там же, в пределах тэгов <head></head> вашего сайта сразу прописываем, необходимый для работы плагина, код:
<script type="text/javascript">
$(function() {
$('#tooltiper a').tooltip({
track: true,
delay: 0,
showURL: false,
fade: 200
});
});
</script>
Кусок кода $('#tooltiper a') показывает, что данный эффект будет применен для всех ссылок, входящих в блок с идентификатором #tooltiper. Если у вас блок со ссылками называется как-то иначе, то просто замените этот идентификатор на свой. Например, $('#container a').
Ниже идет ряд настроек. Разберем их подробнее:
- track. Значение true включает «привязку» подсказки к движущемуся указателю мыши. Обратное значение false, соответственно, выключает эту фишку и делает подсказку статичной.
- delay. Задержка появления подсказки. Чем выше число, тем дольше она не появляется. Мельчить не стоит, тут счет идет на сотни миллисекунд. Пишется обычным числом: 0, 100, 200, 500, 1000 и т.д.
- showURL. Значение true добавляет во всплывающую подсказку кроме самого текста из title еще и ссылку. Значение false, соответственно, это дело выключает.
- 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 можно посмотреть здесь
Теперь вы знаете, как сделать красивую всплывающую подсказку на jQuery и дополнительном плагине Tooltip.
Естественно, это не единственный вариант. Можно сделать всплывающие подсказки и просто на jQuery, и даже на чистом CSS3. Об этом я расскажу в отдельной статье. Оставайтесь на связи!
Удачи!
jQuery для чайников | Введение
jQuery для чайников | Начальные сведения | Простой слайдер
jQuery для чайников | Эффект линзы | плагин JQzoom
jQuery для чайников | Всплывающая подсказка | Плагин Tooltip
А можно этот же эффект сделать на чистом css без плагинов и джейквери?
Михаил, конечно можно! В одном из ближайших постов я расскажу и покажу как, а здесь дам ссылку. Оставайтесь на связи, а лучше подпишитесь, чтобы быть в курсе.