Плагин BetterTip для jQuery позволяет создавать всплывающие подсказки на страницах вашего сайта. Вес скрипта вместе с CSS и картинками — 12кб, а в сжатом виде — 10кб.
Для начала подключаем в разделе head HTML-страницы три файла:
<link rel="stylesheet" href="/css/jquery.bettertip.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.bettertip.js"></script>
JavaScript:
<script type="text/javascript">
$(function(){
BT_setOptions({openWait:250, closeWait:0, cacheEnabled:true});
})
</script>
Параметры:
openWait — число миллисекунд, в течение которых пользователь должен держать курсор наведенным, чтобы всплыла подсказка (по умолчанию: 500)
closeWait — число миллисекунд, в течение которых подсказа должна оставаться видимой после того как пользователь отведет курсор с блока с подсказкой (по умолчанию: 0)
cacheEnabled — может принимать значения true либо false, определяет должен ли контент, вызываемый с помощью AJAX кешироваться (по умолчанию: true)
Всплывающие подсказки можно назначить для элементов <a> и <div>. Эти элементы должны иметь уникальный ID и класс с именем betterTip.
<a id="mylink" href="/ajax.php?width=250" class="betterTip" title="$none">
Dynamic tooltip an 'a' element
</a>
Для элемента <a> можно также задать заголовок подсказки с помощью атрибута title. Атрибут title, кроме обычного текста заголовка подсказки, допускает два специальных значения:
$none — у подсказки не будет заголовока
$content — у подказки будет заголовок, совпадающий с содержимым блока, на который наведен курсор.
Атрибут href отвечает за то, откуда будет загружаться контент подсказки. Дополнительно можно указать ширину блока с подсказкой; по умолчанию — 250px.
Если значение атрибута href начинается с символа $, это означает, что плагин BetterTip должен взять контент из другого элемента страницы. Например href=”$mydiv?width=500″ означает, что текст подсказки будет взят из элемента <div> с id=”mydiv” и ширина блока подсказки 500px. Иначе контент подсказки будет загружен с сервера с использованием AJAX.
<a id="mylink" href="/$mydiv?width=500" class="betterTip" title="$content">
Static tooltip an 'a' element
</a>
<div id="mydiv" style="display:none;">
Here is the content for the tooltip!
</div>
Чтобы задать подсказку для элемента <div>, разместите элемент <a> внутри <div>:
<div class="betterTip" id="div1" style="background-color:#eeeeee;">
<a id="a1" href="/ajax.php?width=300" class="betterTip" title="$none"></a>
Dynamic tooltip for a div
</div>
Элемент <a> внутри <div> нужен чтобы:
задать место, откуда будет загружаться контент подсказки;
указать заголовок подсказки.
