Минусы 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 внутри элемента, для которого нужна подсказка:
(26 строка в коде).
- var tooltip = jQuery(document.createElement('div'))
- ...
- .appendTo(elem);
Ну и понятное дело, что div внутри input — ход не верный. Поэтому меняем appendTo на insertAfter, и подсказки начинают весело отображаться и для inputов.
Так же есть небольшая проблема с отображением в диалоговых окнах jqueryui. для корректного отображения в них нужно помимо стандартного класса .tooltip создать класс, допустим tooltipForDialogBox, где убрать position: absolute; и тултип будет отображаться и в диалоговых окнах.
И напоследок, если нужно поменять текст сообщения, то нужно использовать уже метод update, так как тултип уже создан. Чтобы определить существует ли он уже, я использовал такую конструкцию:
- if ($('#edit').next().hasClass('tooltipForDialogBox'))
- {
- var tip = $('#edit').eq(0).simpletip();
- tip.update('New content');
- }
- else
- {
- $('#edit')
- .simpletip({
- content: 'first content',
- baseClass: 'tooltipForDialogBox'
- });
- }
На странице плагина имеется хорошее API и demo.
Надеюсь, кому то окажется полезен пост и сохранит ему время, чтобы не жалко было моего потраченного)