Минусы jQuery Tools Tooltip, плюсы SimpleTip, а так же немного о том, как решить некоторые проблемы его использования.


До недавнего времени пользовался удобным и маленьким плагином jQuery Tools Tooltip, который всем меня устраивал.
И вот решил найти другой потому что:

1. Отображается в подсказке текст, который содержится в атрибуте title элемента, для которого нужна подсказка. Можно еще передавать через атрибут tip в конструкторе, но передавать нужно jQuery selector, а не просто текст. В общем не очень удобно и не очень гибко;
2. После создания подсказки невозможно поменять текст и вообще содержимое подсказки (ни простая смена атрибута title, ни последующий вызов конструктора $('#email').tooltip(); не помогает). В общем, нет штатного средства, это огорчает.

Решил поискать альтернативу, так как мне нужно было именно обновлять текст подсказки (так как взаимодействие с сервером через ajax и страница не перегружается).

Нагуглил вот такой плагин SimpleTip

Из приятностей:
1. упакованный файл весит 3.3 кБ против 3.4 у Tools Tooltip;
2. передача текста в конструкторе $('#email').simpletip({content: 'hello world'});, туда же можно передавать html, тоесть отображать вообще что душе угодно;
3. возможность обновить содержимое подсказки через update('new content');, да и вообще динамически можно подгружать из разных источников;
4. больше, больше настроек и возможности управлять поведением всплывающих подсказок.

Неприятным было лишь то, что, несмотря на заверение автора «it allows you to create tooltips with ease on any element „, подсказки для input[type=text] элементов не отображались. После просмотра фаербагом страницы оказалось, что плагин создает скрытый div внутри элемента, для которого нужна подсказка:

1. var tooltip = jQuery(document.createElement('div'))
2.                      ...
3.                      .appendTo(elem);

(26 строка в коде).

Ну и понятное дело, что div внутри input — ход не верный. Поэтому меняем appendTo на insertAfter, и подсказки начинают весело отображаться и для inputов.

Так же есть небольшая проблема с отображением в диалоговых окнах jqueryui. для корректного отображения в них нужно помимо стандартного класса .tooltip создать класс, допустим tooltipForDialogBox, где убрать position: absolute; и тултип будет отображаться и в диалоговых окнах.

И напоследок, если нужно поменять текст сообщения, то нужно использовать уже метод update, так как тултип уже создан. Чтобы определить существует ли он уже, я использовал такую конструкцию:

1. if ($('#edit').next().hasClass('tooltipForDialogBox'))
2. {
3.     var tip = $('#edit').eq(0).simpletip();
4.     tip.update('New content');
5. }
6. else
7. {
8.     $('#edit')
9.     .simpletip({
10.         content: 'first content',
11.         baseClass: 'tooltipForDialogBox'
12.     });
13. }

На странице плагина имеется хорошее API и demo.

Надеюсь, кому то окажется полезен пост и сохранит ему время, чтобы не жалко было моего потраченного)