Всплывающие подсказки с помощью jQuery
Сегодня речь пойдет о JavaScript библиотеке, которая предназначена для создания всплывающих подсказок на web странице. Называется она Tooltip и представляет собой плагин для библиотеки jQuery.
Раньше я писал об аналогичном плагине для библиотеки Prototype.
Для того, чтобы сформировать общее представление о возможностях библиотеки достаточно зайти на демонстрационную страницу.
Рассмотрим несколько примеров.
Для того чтобы использовать плагин, нужно в заголовке страницы подключить библиотеку jQuery, плагин Dimensions и сам Tooltip.
Например:
-
<script type="text/javascript" src="js/jquery-compressed.js"></script>
-
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
-
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>
Примечание. Все необходимые файлы находятся в архиве с библиотекой.
Теперь можно создавать подсказки.
Самый простой вариант:
-
$('#element_id').tooltip();
По-умолчанию, текст подсказки будет взят из атрибута title элемента, для которого она создается. При этом к нему будет добавлено значение атрибутов href или src, т.е. ссылка.
Естественно, в большинстве случаев ссылка только портит вид подсказки (особенно, если она длинная). Поэтому предусмотрена возможность ее удаления:
-
$('#element_id').tooltip({showURL: false});
Как видите, в первом параметре функции tooltip в фигурных скобках можно указать настройки отображения подсказок.
Рассмотрим еще несколько примеров.
-
$('#element_id').tooltip({delay: 0});
Убираем задержку перед появлением подсказки.
-
$('#element_id').tooltip({track: true});
Заставляет подсказку двигаться за указателем мыши.
-
$('#element_id').tooltip({top: -20, left: -30});
Эти два параметра задают смещение подсказки относительно указателя мыши.
Но самой полезной опцией, на мой взгляд, является возможность использовать текст любого блока на странице в качестве подсказки.
Прежде всего, создаем этот блок.
-
<div id="myTip" class="hide">Здесь может находиться <strong>текст</strong> с произвольной разметкой</div>
В данном случае он содержит обычную строку, в которой слово текст выделено жирным шрифтом.
Теперь создаем CSS правило, которое спрячет этот блок:
-
.hide {
-
display: none;
-
}
И, наконец, создаем подсказку:
-
$("#elementWithTip").tooltip({
-
bodyHandler: function(){
-
return $("#myTip")[0].innerHTML;
-
},
-
showURL: false
-
});
Разберем этот фрагмент кода.
Функцию tooltip мы вызываем для элемента, к которому нужно добавить подсказку (в данном примере этот элемент имеет id="elementWithTip").
Первая опция называется bodyHandler. Она позволяет задать любой произвольный текст подсказки. В качестве значения мы передаем ей результат выполнения анонимной функции (строки 2-4). Эта функция просто возвращает содержимое блока myTip.
О второй опции я уже писал. Она удаляет ссылку из подсказки.
Оформление подсказок.
При желании можно изменить дизайн подсказки до неузнаваемости 
. В смысле так чтобы она идеально подходила к оформлению вашей страницы.
Все, что нужно – это создать необходимые стили (CSS).
Разметка подсказки имеет вид:
-
<div id="tooltip" style="display: none; left: …px; right: auto; top: …px;" class="">
-
<h3 style="display: none;"/>
-
<div class="body">Текст подсказки.</div>
-
<div class="url" style="display: none;"/>
-
</div>
Как видите, блок с подсказкой имеет id="tooltip" и атрибут style. Сразу обратите внимание на правило display:none. Это правило библиотека добавляет, когда подсказка не видна.
Кроме того, для нормального отображения подсказки нужно определить еще несколько стилей:
-
#tooltip {
-
position: absolute;
-
z-index: 3000;
-
border: 1px solid #111;
-
background-color: #eee;
-
padding: 5px;
-
opacity: 0.85;
-
font-size: 0.8em;
-
}
-
-
#tooltip h3, #tooltip div { margin: 0; }
Обязательными здесь являются правила position и z-index.
Переходим к тексту подсказки. Для его размещения предусмотрены 3 блока.
1) Тег h3 – заголовок подсказки. Создается автоматически, если задана опция showBody. Её значением должен быть разделитель между заголовком и основным текстом.
Например: showBody: " - ". В этом случае если текст подсказки записан так: «Заголовок – Основной текст», то слово «Заголовок» будет находиться внутри тега h3, а фраза «Основной текст» – внутри <div class="body">.
2) div class="body" – блок основной части текста подсказки.
3) div class="url" – блок для ссылки (если она есть).
Думаю, принцип ясен. Используя таблицы стилей (CSS) можно легко изменить дизайн подсказки.
Как видите, библиотека достаточно удобная. От вас требуется минимум работы: написать текст подсказок, «привязать» подсказки к элементам web страницы и оформить их (при необходимости).
Полный перечень опций библиотеки находится здесь.
Если есть вопросы – пишите в комментариях.
До встречи!
Понравилась статья? Подписывайтесь на продолжение 
!
Или на мой твиттер 
Добавьте эту страницу в 
Опубликовано в CSS, HTML, JavaScript, Web разработка Комментарии (76) »
Комментарии (76)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Плагин Dimensions не надо! Он в ядре давно.
Если я отключаю этот плагин, то вылазит ошибка
$(window).scrollLeft is not a functionПравда, подсказки работают.
Полезная вещь, спасибо! Постараюсь реализовать на своем сайте.
У меня подсказка отображается внизу страницы что не так? Уже все вроде б перещупал!
Проверьте, применяется ли правило
position: absolute;
Если не получится – присылайте мне вашу страницу (с кодом и стилями).
Владимир может поможете реализовать. Мне нудно, стоб при наведении на картинку, выскакивала еще одна небольшая картиночка. Как это сделать не мойму.
Посмотрите на этой странице третий сверху пример. Это то, что вам нужно?
Если да, то там же и код приведен
Идея в том, что вы можете показать любой html код в подсказке. Чтобы показать рисунок, нужно в этот код вставить тег img.
Спасибо за скорую помощь, но я вчерп родолжил поиски, и обнаружил что после подключения следующего
все заработало хорошо.
Про absolute уже не пробовал.
После подключения чего? Тоже внизу страницы отображается
После подключения стилей jquery.tooltip.css !!
Добрый день, у меня такой вопрос:
прописываю вот такой код:
$(document).ready(function(){
$(”select”).tooltip({
track: true,
delay: 100,
showBody: “::”,
opacity: 0.85
});
});
все работает просто замечательно до тех пор пока не добавиш disabled в select неподскажете как этого избежать что бы с отключеным элементом подсказка так же появлялась?
Каким образом вы добавили disabled в select?
Я попробовал так:
$('#mysel').attr("disabled", true);
И подсказки нормально отображаются.
а откуда скачать саму библиотеку? о_О
С официальных сайтов: jQuery, Tooltip.
Добрый вечер, у меня следующий вопрос…
прописываю код:
$(document).ready(function(){
$(function() {
$('*').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
fade: 250
});
});
}
желаю, чтобы выводилась всплывающая подсказка для рисунка, который является ссылкой…
<a href="delete.php" rel="nofollow">
</a>
ничего не выходит… надеюсь на помощь…
Не могу точно сказать в чем ошибка у вас. Не понятно почему вы выбираете все элементы $('*') и у ссылки отсутствует атрибут title, который используется для создания текста подсказки.
В любом случае у меня вполне нормально работает такой код:
$(function() {
$('a').tooltip();
});
и ссылка
<a href="#" title="Привет"><img src="my.gif" alt="картинка"></a>
Подсказка при этом содержит слово привет.
У меня почему-то тултипы начинают сразу отображаться у всех элементов, у которых есть аттрибут title
Вызов метода tooltip() у элементов затирает аттрибут title и убирает эффект тултипа, таким образом я не могу задать дополнительные опции для тултипов..
Атрибут title используется по-умолчанию. Т.е. если вы явно не указываете текст подсказки, он будет взят из title.
Как метод tooltip() затирает атрибут title и убирает эффект тултипа я, честно говоря, не понял. Нужно взглянуть на ваш код. Или попробуйте запустить демонстрационные примеры на оф.сайте. Там же приведен и их код.
У меня проблема с установкой размера шрифта и прозрачности фона. На локальном ПК все работает, на сервере нет. Плиз помогите
Извините, проблема была в другом, на самом деле в Опера все работает в IE нет, т.е. ни размер шрифта ни прозрачность не меняются
Извините, ошибся, проблема в другом. В Опера размер шрифта и прозрачность фона устанавливается, а в IE нет. Помогите пожалуйста.
http://www.ebibla.ru/test.htm
Вот пример
Вроде все заработало, у меня страницы не обновлялись нормально
$(function() {а это вообще куда писать? В css?$('a').tooltip();
});
Ивообще модно попродробнее..
– как здесь описано – получилось.
И вообще, у меня такие скрипты стоят:
jquery.tooltip.min.js
jquery.dimensions.js
и
jquery-latest.pack.js
– этого достаточно?
Этот код нужно писать не в css, а в js файл.
Т.е. создать файл myscript.js, разместить в нем код, и подключить его в заголовке страницы.
<script type="text/javascript" src="myscript.js"></script>Вполне.
А как быть, если нужно использовать area?
Проблема в том, что подсказки в ие в area не всплывают. можно как то это побороть?
Да, вы правы, не работает.
Можно попробовать использовать hover
$('#textarea_id').hover(function() {
//курсор над textarea
},
function() {
//курсор вышел из зоны textarea
}
);
ага…
Спасибо
Классная статья!
и снова меня спасла эта статья! =)
Еще раз спасибо за доходчивое объяснение.
Не знаете, случайно, как совместить плагин tooltip с плагином thumbnailviewer? Собственно, проблема в том, что tooltip затирает тайтлы у ссылок, которые нужно не только ему. Как научить его не затирать тайтл ?
Честно говоря, не сталкивался с этой проблемой. Попробуйте поиграться с параметрами.
На оф.сайте есть интересный комментарий
Its great plugin!!
But sometimes, I need dynamic tool tip message.
so in the begining of the function “save()”, I add little hack.
if( settings.injectFunc ){
oldTitle = title = settings.injectFunc(source);
} else {
oldTitle = title = source.attr('title');
}
$("label").Tooltip({injectFunc:myFunction});
so now tooltip shows result of “myFunction” method, if there is injectFunc parameter. Easy to add image, html, and embed flash inside tooltip.
anyway thanks for your cool tooltip!
Попробуйте.
А можно ли внутри подсказки поставить блок, в котором есть функция PHP include?
или что бы в внутри подсказки был блок, в котором находился текст, который брался бы из данных(например base.dat)
Нет, подсказки создаются с помощью JavaScript, т.е. на стороне клиента (браузером).
Но вашу проблему можно решить. Например, при создании страницы (page.php) получать текст полей title из базы.
Спасибо за ответ! Не подскажите как это можно написать? Я пробывал через прототип но там кодировка почему то не проходит. В CSS прописывал @charset "windows-1251";
Я не совсем понял причем тут кодировка. В прошлый раз вы спрашивали о получении данных из базы.
Пример готового скрипта я не приведу, т.к. тут много нюансов которые зависят от вашего сайта, используемых библиотек и т.п.
Но общий принцип такой.
1) Получаете данные из базы (текст для атрибутов title). Они будут сохранены в каком-нибудь массиве.
2) Формируете страницу. При этом читаете данные из массива и вставляете в title (с помощью PHP скрипта).
3) Подключаете плагин для создания подсказок. Он автоматически прочитает данные из title.
спасибо
Сперва вопрос: подскажите, пожалуйста, каким образом можно принудительно вызвать всплывающую подсказку у какого-то элемента формы, например, при нажатии кнопки на форме.
Ответ Арману (если я правильно понял вопрос):
У меня такой пример:
Есть в форме f1 комбобокс, часть кода которого:
...
В скриптах есть функция, которая принимает указатель на комбобокс:
function checks(sid) {$.ajax({type: "POST",
url: "checks.php",
data: {sid: sid.value},
success: function(msg){
sid.title = msg;
}
});
}
Кстати, пример взят из википедии
И, наконец, есть файл checks.php, который получает методом POST переменную sid, что-то с ней делает и возвращает текст (просто через php-функцию echo).
В файл checks.php можете вставлять что угодно… соединение с базой, инклуды других пхп-файлов и т.п.
Ну ещё в файл пхп с формой в заголовок вставил:
$(function() {
$("#sid").tooltip({track: true, delay: 0, showURL: false, fixPNG: true});
});
Но последнее, прямого отношения к вопросу не имеет.
P.S. Прошу прощения за мой английский, вернее, jquery-вский, так как считаю себя начинающим пользователем этой изумительной (экономит время) библиотеки.
Код комбобокса (в первый раз не вставился почему-то):
Код комбобокса (повторно):
< select size="1" id="sid" name="sid" onChange="checks(document.forms['f1'].elements['sid'])">Я не нашел подходящей функции в документации к плагину.
В любом случае, на мой взгляд, это не очень удачное решение использовать именно этот плагин в такой ситуации. Он создавался немного для других целей.
Вам проще будет вручную написать обработчик события click для кнопки, который будет вставлять/убирать в нужное вам место на странице подсказку.
Если будут вопросы, пишите, постараюсь помочь
Как заставить подсказку всплыть над элементом? Есть решения от jQuery? Я знаю про библиотеку Overlib, но не хотелось бы использовать решения от множества разработчиков.
Можно попробовать использовать параметры top и left. Выставить их с учетом размера подсказки. И если не хотите, чтобы подсказка двигалась за курсором track:false.
Как-то криво работает, если я использую в javascript переменные.
Есть два элемента.
Я делаю
queue_name = "111";
jQuery("#queue_" + queue_name).tooltip({
bodyHandler: function() {
return jQuery("#queue_fullcont_" + queue_name)[0].innerHTML;
},
showURL: false
});
Затем
queue_name = "222";
jQuery("#queue_" + queue_name).tooltip({
bodyHandler: function() {
return jQuery("#queue_fullcont_" + queue_name)[0].innerHTML;
},
showURL: false
});
В итоге при наведении на оба элемента всплывает последняя подсказка. Связано как раз с использованием переменных в имени. Как можно бороться с этим?
Использовать разные имена переменных. Вы присваиваете одной и той же переменной два разных значения, естественно, сохраняется последнее.
Добрый день.
А у меня вопрос на счет позиционирования подсказки: она позиционируется абсолютно относительно курсора. но использовать можно значения только top и left. Мне необходимо чтобы подсказка была сверху курсора, можно ли как то спозиционировать с помощью bottom? вариант например top:-120px не подходит, так как высота подсказки имеет неопределенное значение в зависимости от внутреннего содержимого.
Извините, быстро просмотрела комменты и не увидела что уже был подобный вопрос.
Смогла это исправить правкой в jquery.tooltip.js, пришлось вычесть высоту тултипа… а вот как исправить это извне не знаю, ведь подсказка создается и позиционируется в этом js файле…
Подсказка – это обычный блок с абсолютным позиционированием. Посмотрите (с помощью firebug) какой у него id и вы сможете получить его с помощью $('#tooltip_id'). После этого можно определить высоту изменить положение блока.
Здравствуйте. Меня интересует одна вещь. (сама я только новичок в этом деле, но смысл понимаю)
Опишу свою ситуацию.
Я хочу сделать вывод статей с использованием данного эффекта.
http://jquery.bassistance.de/tooltip/demo/ 3 или 4 пример
У меня стоит CMS Joostina.
Имеется модуль вывода новостей.
Хотел сделать чтобы выводились только картинки. А при наведении на них высвечивалась сама новость. Сложно ли прикрутить этот эффект? (желательно 4 пример)
Модуль уже умеет выводить саму новость, дату, заголовок и т.д. только нужно сделать это во всплывающем окне.
Спасибо.
Если надо, могу кинуть код модуля, а вы только намекнёте куда крутить =)
Ставить Joostina и ковыряться в ней я не буду, расскажу только общий принцип.
Нужно сделать 4 вещи.
1) Подключить jQuery и этот плагин.
2) Текст новости (который должен появляться в подсказке) заключить в теги вроде <div id="myTip" class="hide">. Для этого, скорее всего, придется настроить модуль.
3) Вставить js код, который создает подсказку. Можно взять из этой статьи.
4) Подключить CSS стили. Именно с их помощью блоки с классом hide становятся невидимыми. (можно взять из этой статьи или примеров на офф. сайте).
Нет. Вы не поняли. =)
Не нужно ничего ставить. Вот часть кода которая показывает текст.
<?php if($params->get('text',0)): ?>
<?php echo $row->text;?>
<?php endif; ?>
Как мне правильно вставить описанные вами теги?
Остальное по томуже принципу. Мне только понять как =) Это моя первая попытка реализовать данный пример.
Мне нужно заключать следующим образом?
<div id="myTip" class="hide"><?php if($params->get('text',0)): ?>
<?php echo $row->text;?>
<?php endif; ?></div>
так?
Можно и так, но, наверное, лучше будет так:
<?php if($params->get('text',0)): ?>
<div id="myTip" class="hide"><?php echo $row->text;?></div>
<?php endif; ?>
Чтобы теги не отображались если текста нет.
Спрятать у меня получилось. А как сделать чтобы текст появлялся при наведении на фото? Чёт я весь вечер кручу и ничего не получается((
Мне изображение тоже в дивы заключать и присваивать любой ид? А как заставить появляться текст при наведении на изображение…..
Не видя кода сложно сказать что не работает. Идея в том, что при наведении на картинку должен изменяться CSS класс у блока с текстом (при этом блок становится видимым). Поэтому лучше всего проверять firebug'ом. При этом в первую очередь проверить, установлен ли обработчик клика по картинке (устанавливается с помощью tooltip).
У меня таже проблема что и у Сергея…
Я не пойму как правильно прикрутить.
Поправьте если не так что-то:
1) подключаю библиотеку
2) Заношу в дивы появляющийся текст(подсказку)
Текст
В CSS прописываю:
.hide {display: none;}
Текст скрылся…
Далее…
3) Имеется какое-то поле, при наведении на которое должен появиться текст, который находиться в классе "hide":
Тыры пыры… (Любое содержимое)
Просто сверху посты тех, кто в этом разбирается.. Я читал, читал, так и не понял как это всё заставить работать… Объясните на доступном уровне для новичков… Очень хочется =)
Я вообще использую плагин: Simpletip, но думаю принцип тотже =) Буду ждать ответ
Для поля к которому мы создаем подсказку нужно вызвать метод tooltip (или Simpletip). В параметрах этого метода должен быть указан div с подсказкой (девятый блок кода в этой статье).
Этот метод назначет обработчик, который при наведении на элемент:
1) убирает класс hide у div'а;
2) позиционирует div (с помощью top и left).
Т.е. вам нужно с помощью firebug проследить как меняются классы у div'ов с подсказками.
Всё =)
Нашёл проблему и решил.
Теперь вопрос в другом.
Меня интересует момент где производиться вывод блока (девятый блок кода).
Как сделать чтобы ещё выводимый контент двигался за показателем и плавно появлялся?
И с этим разобрался…
Другая проблема:
У меня всплывающие подсказки должны генерироваться под генерирующийся контент. Но подсказка работает только на 1-ом объекте. На другие не действует. Вот код:
$(function() {$("#news_nd_popup").tooltip({
track: true,
showURL: false,
fade: 250 ,
bodyHandler: function(){
return $("#myTip")[0].innerHTML;
$('#myTip').tooltip({top: -20, left: -30});
},
showURL: false
});
});
Генерирующиеся блоки – у них должны быть разные id (это требования стандарта).
Вы создаете подсказку только для одного блока news_nd_popup.
Добавьте порядковые номера к блокам news_nd_popup_1, news_nd_popup_2, … и класс, например, class="news_nd_popup".
И выбирайте элементы по классу.
$(".news_nd_popup").tooltip({
Опишу ситуацию, чтобы бала ясна моя позиция:
У меня имеется модуль, а у него шаблон(все операции с шаблоном):
1) подключаю скрипты
2) задаю id блоку, при наведении на который будет всплывающее окно:
Ну тут любое содержание(генерируется модулем)3)задаю id и класс всплывающему блоку:
Тут генерируется содержимое—————————-
и данная операция повторяется столько, какое кол-во объектов модуля я выставлю в модуле (т.е. оно всегда может быть разным от 0 и до 100(к примеру))
Так как правильно сделать?
Пункты 2 и 3.
Если блоков несколько, то id должны изменяться для каждого блока. Например, id="block_1" и ему соответствует всплывающий блок id="popup_1". Кроме того, каждому блоку добавляем класс class="block_with_popup".
Т.е. у вас получится, например, 50 блоков и 50 подсказок к ним.
После этого нужно связать блоки с подсказками. Для этого
1) находим все блоки с классом block_with_popup
2) для каждого найденного блока:
2.1) получаем его id
2.2) вытаскиваем из id порядковый номер и добавляем к нему "popup_" в результате получаем id всплывающего блока
2.3) связываем текущий блок и соответствующий ему всплывающий блок.
Да я так примерно и думал =)
Но сейчас думаю, что лучше будет через модальные реализовать
Но тем не менее этот способ полез.
Вопрос есть.
return $("#myTip")[0].innerHTML;эта часть возвращает блок, только делая его видимым? Или полностью очищаются свойства для данного id?Этот код возвращает содержимое блока подсказки. Потом для этой подсказки плагин устанавливает абсолютное позиционирование, убирается класс hide и т.д.
Здравствуйте, Владимир,
А вы случаем не встречались с проблемой когда при всплывании картинки-подсказки в FF (3.5.7) картинка иногда мерцает, то показывается, то нет? Причем чаще проблема возникает когда картинка должна развернуться вниз. Похоже на какой то глюк плагина.
А в опере от "проехавшихся" картинок остаются следы.
Может быть вы подскажете более стабильно работающий плагин?
Честно говоря, я не видел таких багов, ни в опере, ни в FF (специально ещё раз проверил).
Попробуйте использовать подсказки, которые входят в jQuery Tools.
Да, jQuery Tools работают гораздо стабильнее. Спасибо за наводку!
Здравствуйте.
такой вопрос, если допустим я вставляю такой код:
то вторая картинка не отображается, как можно сделать чтобы несколько изображений как подсказку выводил?
<div id="elementWithTip"><a href="/"><img id="1" src="karte.png" height="200" width="200"/></a></div>
<div id="tooltip" class="hide"><mg id="1" src="karte.png" height="200" width="200"/></div>
<div id="elementWithTip"><a href="/"><img id="2" src="karte.png" height="200" width="200"/></a></div>
<div id="tooltip" class="hide"><img id="2" src="karte.png" height="200" width="200"/></div>
при чем id="elementWithTip" не может меняться
id всех элементов должны быть разными. Это требования стандарта. Нельзя рассчитывать, что плагин будет правильно при этом работать.
Нечего непонял…
вобщем откуда че качать?
плиз ссылки нормально дайте:
вот тебе 1,2,3 модуль
вот то то впиши.
а то я накачал выше представленные, у меня вобще страничка зависла на загрузке данных модулей…
спс. если кто поможет!
Скачать нужно три компонента:
1) библиотека jQuery
2) плагин Dimensions.
3) Плагин Tooltip.
А подключать так, как описано в статье.
P.S. Посмотрите, какие ошибки выдаёт firebug при загрузке вашей странички.