jQuery для чайников | Всплывающая подсказка | Плагин Tooltip

tooltippic.gif

Вам наверняка уже попадались такие стильные всплывающие подсказки на страницах сайтов при наведении указателя мыши на какой-либо элемент. На самом деле это ни что иное как содержимое свойства title, которое обычно прописывается к ссылкам или картинкам. По-умолчанию браузеры сами показывают такие всплывающие подсказки, но делают это довольно просто и обыденно. Плагин jQuery Tooltip позволяет сделать это более динамично и красиво, а именно: он показывает плавно появляющуюся и затухающую подсказку, словно бы привязанную к указателю мыши и двигающуюся вслед за ним.

Для того, чтобы реализовать данный эффект, нужно скачать свежую версию библиотеки jQuery и до кучи сам плагин Tooltip. Подробнее с плагином Tooltip можно ознакомиться на сайте его автора Jorn Zaefferer-а bassistance.de

Оба скрипта подключаем по стандартной схеме, в пределах тэгов <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')

Ниже идет ряд настроек. Разберем их подробнее:

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 можно посмотреть здесь

Теперь вы знаете, как сделать красивую всплывающую подсказку на jQuery и дополнительном плагине Tooltip. Естественно, это не единственный вариант. Можно сделать всплывающие подсказки и просто на jQuery, и даже на чистом CSS3. Об этом я расскажу в отдельной статье. Оставайтесь на связи! И подписывайтесь на обновления блога, чтобы ничего не пропустить ценного :)

Удачи!

03.03.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

2 комментария

  1. Михаил Р.

    24.02.2017

    А можно этот же эффект сделать на чистом css без плагинов и джейквери?

  2. Игорь Квентор

    25.02.2017

    Михаил, конечно можно! В одном из ближайших постов я расскажу и покажу как, а здесь дам ссылку. Оставайтесь на связи, а лучше подпишитесь, чтобы быть в курсе.

Оставить комментарий: