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

В моём проекте испльзуется $.ajax() и результат выполнения AJAX-запроса необходимо также обрабатывать функцией tooltip, чтобы и там были красивые всплывающие подсказки.

Для того, чтобы это реализовать, функция

$(function() {
$('*').tooltip({delay:100,track:true,showURL:false,opacity:0.85});
});

была вынесена в отдельную функцию, например testfunc() и я вызывал её сразу после выполнения ajax-запроса (on complete).

Так вот после второго вызова у нового “вставленного” содержимого подсказки появлялись, а вот все старые исчезали. Почему?

Потому что функция tooltip работает следующим образом: анализирует содиржимое атрибутов title у каждого (или заданного) тега и "прячет" это значение к себе в массив, для отображения его в отдельном контейнере div, после наведения мыши на элемент. При этом исходное значение атрибута очищается.

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

Решение было найдено и оно заключается в другой конструкции:

$('*').each( function () {
if (this.title != '' $(this)tooltip({delay:100,track:true,showURL:false,opacity:0.85});
});

В этом случае tooltip применится только к тем элементам, к которым он ещё не применялся. Тогда будут и новые и старые подсказки.

Успехов! И удачных Вам проектов!

Add comment


Security code
Refresh