Всплывающие подсказки с помощью jQuery

7 октября, 2008
jquery tooltip

Сегодня речь пойдет о JavaScript библиотеке, которая предназначена для создания всплывающих подсказок на web странице. Называется она Tooltip и представляет собой плагин для библиотеки jQuery.

Раньше я писал об аналогичном плагине для библиотеки Prototype.

Для того, чтобы сформировать общее представление о возможностях библиотеки достаточно зайти на демонстрационную страницу.

Рассмотрим несколько примеров.

Для того чтобы использовать плагин, нужно в заголовке страницы подключить библиотеку jQuery, плагин Dimensions и сам Tooltip.

Например:

  1. <script type="text/javascript" src="js/jquery-compressed.js"></script>
  2. <script type="text/javascript" src="js/jquery.dimensions.js"></script>
  3. <script type="text/javascript" src="js/jquery.tooltip.min.js"></script>

Примечание. Все необходимые файлы находятся в архиве с библиотекой.

Теперь можно создавать подсказки.

Самый простой вариант:

  1. $('#element_id').tooltip();

По-умолчанию, текст подсказки будет взят из атрибута title элемента, для которого она создается. При этом к нему будет добавлено значение атрибутов href или src, т.е. ссылка.

Естественно, в большинстве случаев ссылка только портит вид подсказки (особенно, если она длинная). Поэтому предусмотрена возможность ее удаления:

  1. $('#element_id').tooltip({showURL: false});

Как видите, в первом параметре функции tooltip в фигурных скобках можно указать настройки отображения подсказок.

Рассмотрим еще несколько примеров.

  1. $('#element_id').tooltip({delay: 0});

Убираем задержку перед появлением подсказки.

  1. $('#element_id').tooltip({track: true});

Заставляет подсказку двигаться за указателем мыши.

  1. $('#element_id').tooltip({top: -20, left: -30});

Эти два параметра задают смещение подсказки относительно указателя мыши.

Но самой полезной опцией, на мой взгляд, является возможность использовать текст любого блока на странице в качестве подсказки.

Прежде всего, создаем этот блок.

  1. <div id="myTip" class="hide">Здесь может находиться <strong>текст</strong> с произвольной разметкой</div>

В данном случае он содержит обычную строку, в которой слово текст выделено жирным шрифтом.

Теперь создаем CSS правило, которое спрячет этот блок:

  1. .hide {
  2.     display: none;
  3. }

И, наконец, создаем подсказку:

  1. $("#elementWithTip").tooltip({
  2.     bodyHandler: function(){
  3.         return $("#myTip")[0].innerHTML;
  4.     },
  5.     showURL: false
  6. });

Разберем этот фрагмент кода.

Функцию tooltip мы вызываем для элемента, к которому нужно добавить подсказку (в данном примере этот элемент имеет id="elementWithTip").

Первая опция называется bodyHandler. Она позволяет задать любой произвольный текст подсказки. В качестве значения мы передаем ей результат выполнения анонимной функции (строки 2-4). Эта функция просто возвращает содержимое блока myTip.

О второй опции я уже писал. Она удаляет ссылку из подсказки.

Оформление подсказок.

При желании можно изменить дизайн подсказки до неузнаваемости :-) . В смысле так чтобы она идеально подходила к оформлению вашей страницы.

Все, что нужно – это создать необходимые стили (CSS).

Разметка подсказки имеет вид:

  1. <div id="tooltip" style="display: none; left: …px; right: auto; top: …px;" class="">
  2.     <h3 style="display: none;"/>
  3.     <div class="body">Текст подсказки.</div>
  4.     <div class="url" style="display: none;"/>
  5. </div>

Как видите, блок с подсказкой имеет id="tooltip" и атрибут style. Сразу обратите внимание на правило display:none. Это правило библиотека добавляет, когда подсказка не видна.

Кроме того, для нормального отображения подсказки нужно определить еще несколько стилей:

  1. #tooltip {
  2.     position: absolute;
  3.     z-index: 3000;
  4.     border: 1px solid #111;
  5.     background-color: #eee;
  6.     padding: 5px;
  7.     opacity: 0.85;
  8.     font-size: 0.8em;
  9. }
  10.  
  11. #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 страницы и оформить их (при необходимости).

Полный перечень опций библиотеки находится здесь.

Если есть вопросы – пишите в комментариях.

До встречи!

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в CSS, HTML, JavaScript, Web разработка View Comments

]]>
  • Antibuger
    Здравствуйте. Это довольнно сложный вариант реализации подсказки.

    http://www.eurosites.ru/index.php?page=%D1%F2%E0%F2%FC%E8&cat=1&id=103&all
    Посмотрите все.
    ЭТО НЕ СПАМ.
    СТАТЬЯ АВТОРСКАЯ!
  • Сегодня обнаружил интересную особенность работы tooltip.

    Например у Вас tooltip должен применяться ко всем элементам на странице.

    Так вот, попробуйте, к примеру, вынести функцию $(function() {
    $('*').tooltip({delay:100,track:true,showURL:false,opacity:0.85});
    });

    в отдельную функцию, например testfunc() и выполнить её 2 раза.

    Зачем это нужно? Ну вот Вы к примеру “подргрузили” часть содержимого с помощью $.ajax() и в этом содержимом у Вас есть элементы, к которым тоже нужно применить tooltip. Как это сделать? ещё раз вызвать функцию testfunc().

    Так вот после второго вызова у нового “вставленного” содержимого подсказки будут, а вот все старые исчезнут!

    Решение заключается в другой конструкции:
    $('*').each( function () {
    if (this.title != ”) $(this)tooltip({delay:100,track:true,showURL:false,opacity:0.85});
    });

    В этом случае tooltip применится только к тем элементам, к которым он ещё не применялся. Тогда будут и новые и старые подсказки.
  • Спасибо, что поделились решением!
    Правда я бы попробовал сделать немного по-другому.
    Допустим ajax метод возвращает разметку в переменной newData. Вы можете преобразовать эту разметку в объект jQuery и назначить ему обработчики, т.е. работает следующий код. 

    var ml = $('<a href="#">test</a><a href="#">test</a>')

    	.click(function(){

    		alert('111');

    		return false;

    	});

    $(content).append(ml);
  • Марина
    Здравствуйте!
    Промучилась всю ночь и ничего не вышло
    Ни подсказки самой( в виде картинки) не видно, ни ссылки, для которой подсказка(((((
    Володя! Если сделаете одолжение помочь, то напишите пожалуйста, что мне нужно написать здесь
    Спасибо
    Марина
  • Что-то мы топчемся на месте :)
    Я сделал скриншот firebug'а, которым я смотрю разметку страницы.
    http://screencast.com/t/YmQ1Nzhh
    Там остались теже теги, что были раньше. Где рисунок (тег img), который должен появиться в подсказке? Он должен быть вставлен в разметку страницы.
  • Марина
    Володя!
    Огромное СПАСИБО Вам!
    Буду пробовать.
  • Марина
    Володя!
    Пожалуйста, напиши этот тег с img ПОЛНОСТЬЮ, как он должен выглядеть для моей страницы. Очень прошу!
    и куда его вставлять, чтоб эта подсказка проявлялась, там где надо(на ссылке)?????
    я наверно тупая))),
  • Размещением подсказки занимается плагин. Вам нужно вставить картинку в любое место на странице. CSS стили делают ее невидимой, а когда ее нужно показать в подсказке, плагин рассчитывает ее положение и делает видимой.
  • <div id="dhtmlgoodies_tooltip" style="display: none; left: 484px; top: 1380px; width: 116px;"><img src="filename.jpg" alt="рисунок" /></div>

    Примерно так.
  • Марина
    Здравствуйте уважаемый автор!
    Я недавно начала делать сайт для своей компании, и очень хочу реализовать эти подсказки. Но так как, я не очень разбираюсь в языках jquery, прошу помощи!
    Напишите пожалуйста подробно (это сюда, это туда) как вставить эти подсказки на сайт, чтоб подсказка всплывала именно в виде картинки( как наверху странички нарисовано).ПОЖАЛУЙСТА! и файлы куда закачать (у меня в корне сайта создано папки js и css и images
    Я перепробовала все уже, и вверх html вставляла и вниз, и стили вниз страницы ставила - НИЧЕГО не выходит, не показываются они.
    Может я неправильно именно сами строки подсказки ставлю?
    Очень прошу - НАПИШИТЕ!
    С уважением Марина
  • Дайте, пожалуйста, ссылку на страницу, которую вы делаете. Просто по вашему описанию сложно понять, в чем ошибка :)
  • Марина
    Спасибо за ответ!
    Я написала вам письмо, но оно не прошло по вашему адресу
    Вот мой сайт okomfort.ucoz.ru
    Ссылка на страницу Главная okomfort.ucoz.ru/index/0-1

    Вот так в управлении дизайном "Страницы сайта"

    Куда и что вставлять , я уже запуталась
    Если можно, напишите конкретно ЧТО и куда запихивать))) и какие фото и куда, на подсказку саму, надо закачать на сайт
    С ОГРОМНОЙ БЛАГОДАРНОСТЬЮ за ответ
    Марина
    СПАСИБО ВАМ!
  • У вас внизу страницы есть тег
    <div id="dhtmlgoodies_tooltip" style="display: none; left: 484px; top: 1380px; width: 116px;">ПЕРЕХОД НА СТРАНИЦУ</div>
    в котором находится текст подсказки.

    Этот текст нужно заменить на рисунок (тег img).
  • Армен
    учебников прочел не мало
  • Армен
    меня просто интересует такой же эффект медленного всплывания подсказки и постепенного угасания. Такое можно сделать на JS ?
  • Реализацию этого эффекта можно посмотреть в библиотеке вроде jQuery (методы fadeIn и fadeOut).
  • Код использовать нельзя, но что мешает посмотреть их реализацию?
  • Армен
    мне нельзя использовать сторонние библиотеки, код должен быть написан только с помощью JavaScript и все
  • Армен
    Люди помогите. Бьюсь над проблемой 5-й день.
    Пытаюсь реализовать такую же штуку, только без сторонних бибиотек. Чтоб когда наводишь на выводилась подсказка, но она должна быть реализована с помощью JavaScript и главное(повторюсь)без сторонних библиотек.
    И еще , текст в подсказке должен постоянно менятся на стороне сервера.
    Вобщем, вот это все, что на этой странице показано с помощью jQuery нужно написать "чистым" JavaScript.
    Можно нужно ли добавлять Ajax?
    И с чего вообще начинать?
    Очень нужна помощь, люди добрые.
  • Я не понял фразу "текст в подсказке должен постоянно менятся на стороне сервера". Если текст будет меняться после того, как посетитель открыл страницу, и до того, как он с неё ушел, то нужен ajax.

    И с чего вообще начинать?


    Всё зависит от того, насколько хорошо вы знаете JS на данный момент.
  • Армен
    Трудный вопрос: на сколько знаю я JS :)
    а на сколько нужно знать его, чтоб сделать подобное?
  • Как минимум - учебник какой-нибудь о JS почитать (и разобраться во всех примерах) ;)
  • Юрий
    Нечего непонял...
    вобщем откуда че качать?
    плиз ссылки нормально дайте:
    вот тебе 1,2,3 модуль
    вот то то впиши.
    а то я накачал выше представленные, у меня вобще страничка зависла на загрузке данных модулей...

    спс. если кто поможет!
  • Скачать нужно три компонента:
    1) библиотека jQuery
    2) плагин Dimensions.
    3) Плагин Tooltip.
    А подключать так, как описано в статье.

    P.S. Посмотрите, какие ошибки выдаёт firebug при загрузке вашей странички.
  • Евгений
    при чем id="elementWithTip" не может меняться
  • id всех элементов должны быть разными. Это требования стандарта. Нельзя рассчитывать, что плагин будет правильно при этом работать.
  • Евгений
    Здравствуйте.

    такой вопрос, если допустим я вставляю такой код:








    то вторая картинка не отображается, как можно сделать чтобы несколько изображений как подсказку выводил?
  • А в опере от "проехавшихся" картинок остаются следы.
    Может быть вы подскажете более стабильно работающий плагин?
  • Честно говоря, я не видел таких багов, ни в опере, ни в FF (специально ещё раз проверил).
    Попробуйте использовать подсказки, которые входят в jQuery Tools.
  • Да, jQuery Tools работают гораздо стабильнее. Спасибо за наводку!
  • Здравствуйте, Владимир,
    А вы случаем не встречались с проблемой когда при всплывании картинки-подсказки в FF (3.5.7) картинка иногда мерцает, то показывается, то нет? Причем чаще проблема возникает когда картинка должна развернуться вниз. Похоже на какой то глюк плагина.
  • Сергей
    Да я так примерно и думал =)
    Но сейчас думаю, что лучше будет через модальные реализовать
    Но тем не менее этот способ полез.
    Вопрос есть.
    return $("#myTip")[0].innerHTML; эта часть возвращает блок, только делая его видимым? Или полностью очищаются свойства для данного id?
  • Этот код возвращает содержимое блока подсказки. Потом для этой подсказки плагин устанавливает абсолютное позиционирование, убирается класс hide и т.д.
  • Сергей
    Опишу ситуацию, чтобы бала ясна моя позиция:

    У меня имеется модуль, а у него шаблон(все операции с шаблоном):
    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) связываем текущий блок и соответствующий ему всплывающий блок.
  • Сергей
    И с этим разобрался...
    Другая проблема:
    У меня всплывающие подсказки должны генерироваться под генерирующийся контент. Но подсказка работает только на 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) Заношу в дивы появляющийся текст(подсказку)
    Текст
    В CSS прописываю:

    .hide {display: none;}
    Текст скрылся...
    Далее...
    3) Имеется какое-то поле, при наведении на которое должен появиться текст, который находиться в классе "hide":
    Тыры пыры... (Любое содержимое)

    Просто сверху посты тех, кто в этом разбирается.. Я читал, читал, так и не понял как это всё заставить работать... Объясните на доступном уровне для новичков... Очень хочется =)
    Я вообще использую плагин: Simpletip, но думаю принцип тотже =) Буду ждать ответ
  • Для поля к которому мы создаем подсказку нужно вызвать метод tooltip (или Simpletip). В параметрах этого метода должен быть указан div с подсказкой (девятый блок кода в этой статье).

    Этот метод назначет обработчик, который при наведении на элемент:
    1) убирает класс hide у div'а;
    2) позиционирует div (с помощью top и left).

    Т.е. вам нужно с помощью firebug проследить как меняются классы у div'ов с подсказками.
  • Сергей
    Спрятать у меня получилось. А как сделать чтобы текст появлялся при наведении на фото? Чёт я весь вечер кручу и ничего не получается((
    Мне изображение тоже в дивы заключать и присваивать любой ид? А как заставить появляться текст при наведении на изображение.....
  • Не видя кода сложно сказать что не работает. Идея в том, что при наведении на картинку должен изменяться CSS класс у блока с текстом (при этом блок становится видимым). Поэтому лучше всего проверять firebug'ом. При этом в первую очередь проверить, установлен ли обработчик клика по картинке (устанавливается с помощью tooltip).
  • Сергей
    Здравствуйте. Меня интересует одна вещь. (сама я только новичок в этом деле, но смысл понимаю)
    Опишу свою ситуацию.
    Я хочу сделать вывод статей с использованием данного эффекта.
    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; ?>

    Чтобы теги не отображались если текста нет.
  • Елена
    Извините, быстро просмотрела комменты и не увидела что уже был подобный вопрос.
    Смогла это исправить правкой в jquery.tooltip.js, пришлось вычесть высоту тултипа... а вот как исправить это извне не знаю, ведь подсказка создается и позиционируется в этом js файле...
  • Подсказка - это обычный блок с абсолютным позиционированием. Посмотрите (с помощью firebug) какой у него id и вы сможете получить его с помощью $('#tooltip_id'). После этого можно определить высоту изменить положение блока.
  • Елена
    Добрый день.
    А у меня вопрос на счет позиционирования подсказки: она позиционируется абсолютно относительно курсора. но использовать можно значения только top и left. Мне необходимо чтобы подсказка была сверху курсора, можно ли как то спозиционировать с помощью bottom? вариант например top:-120px не подходит, так как высота подсказки имеет неопределенное значение в зависимости от внутреннего содержимого.
  • videns
    Как-то криво работает, если я использую в 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
    });

    В итоге при наведении на оба элемента всплывает последняя подсказка. Связано как раз с использованием переменных в имени. Как можно бороться с этим?
blog comments powered by Disqus ]]>