Всплывающие подсказки: плагин BetterTip для jQuery

Плагин BetterTip для jQuery позволяет создавать всплывающие подсказки на страницах вашего сайта. Вес скрипта вместе с CSS и картинками — 12кб, а в сжатом виде — 10кб.

Для начала подключаем в разделе head HTML-страницы три файла:

<link rel="stylesheet" type="text/css" 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> нужен чтобы:

  • задать место, откуда будет загружаться контент подсказки;
  • указать заголовок подсказки.

Ссылки по теме:

Комментариев: 6

  1. фин:

    Спасибо пригодиться-)))

  2. sergik:

    Жаль что только работает от href, как мне переходить на другие страницы?

  3. Дмитрий Глазков:

    Подкажите, как реализовать это для картинки а не только для текста. Стобы такая подсказка как у вас в примере отображалать при наведении курсора на картинку сайта. И поддерживает ли эта подсказка форматирование? Спасибо!

  4. admin:

    Дмитрий Глазков, нужно разместить внутри элемента <a> картинку, а не текст.

  5. Елена:

    А можно ли сделать подсказку на картинку, которая является ссылкой?

  6. admin:

    Елена, попробуйте так:

    <div class="betterTip" id="div1" style="background-color:#eeeeee;">
        <a id="a1" href="ajax.php?width=300" class="betterTip" title="$none"></a>
        <a href="http://server.com/"><img src="/images/banner.gif" alt="" /></a>
    </div>

    Если такой вариант не пройдет, поищите другой плагин - их сейчас более чем достаточно.

Оставьте свой отзыв