Сразу объясню, что сподвигло меня писать собственный плагин для jquery, когда уже давно есть несколько готовых.
Во-первых, это мое стремление к простоте и красоте ибо они спасут мир, а когда я взглянул на исходный код нескольких существующих, то понял, что спасать мир придется долго. Усугубило положение зависимость многих из них от других плагинов (таких как bgiframe и delegate)
Во-вторых, это невозможность менять текст тултипа "на лету". Косвенно это можно делать изменяя атрибут title у целевого элемента, но это не совсем удобно при генерации содержимого, когда сами элементы также формируются динамически. Связано это с очередным неочевидным багом ИЕ, который не дает добавлять div всплывающей подсказки в контейнер body до завершения его формирования, т.е. вызов плагина должен осуществляться в рамках волшебной функции $(document).ready(function(){});, иначе все семейство Експлореров будет ругаться примерно так:
HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Ну и в-третьих, это размер. В несжатом виде у меня получилось 1667 b.
Как использовать:
добавляем на страницу скрипт
<script type="text/javascript" src="scr/jquery.js"></script>
<script type="text/javascript" src="scr/jquery.easytooltip.js"></script>
в таблицу стилей класс tooltip, например
.tooltip {
position: absolute;
z-index: 1000;
border: 1px solid gray;
background-color: #FFFFD4;
padding: 10px 10px 10px 10px;
opacity: 0.85;
filter: alpha(opacity=85);
}
и вызываем метод tooltip() для целевого элемента (см. примеры).
Доступны следующие параметры:
txt - html код подсказки, если не указан, то берется из title целевого элемента
maxWidth - максимальная ширина всплывающего блока
effect - эффект появления, может принимать значения: fadeIn (по умолчанию), slideDown, hide. Для затухания будет взят противоположный эффект.
duration - длительность появления/затухания
примеры
$("#tst").tooltip(); // текст tooltip'а в атрибуте title элемента
$("#tst2").tooltip({
txt: 'Это просто пример всплывающей<br> подсказки JavaScript!',
maxWidth: 150
});
$("#tst3").tooltip({txt: '<img src="img/jquery.png" width="60" height="90" alt="jquery" />'});
$("#tst4").tooltip({
txt: 'Это пример изменения эффекта появления',
effect: 'slideDown'
});
$("#tst5").tooltip({
txt: 'Это пример изменения длительности появления',
effect: 'show',
duration: 900
});