qTip - The jQuery tooltip plugin

qTip - всплывающая подсказка, использующая jQuery.


Домашняя страница проекта
Демки с примерами кодов
Документация

Плагин обладает довольно обширными возможностями: во всплывающих окнах можно показывать html страницу, делать подсказки, меню и т.д.на любом движке (смотреть официальные демки).

Небольшой пример.

Подключение:

Качаем архив с двумя библиотеками, кладём на хостинг.
Если нет в блоге jQuery, то в /head прописываем:

<script src='http://linuxesrf.gb7.ru/docs/jquery-1.3.2.min.js' type='text/javascript'/>

Перед /body:

<script src='http://linuxesrf.gb7.ru/docs/jquery.qtip-1.0.0-rc3.min.js' type='text/javascript'/>

Ссылка на всплывающее меню в blogger будет выглядить так:

<div id="content"><a href="#" rel="">тыц</a></div>

+ код:

<script class="example" type="text/javascript">
    // Create the tooltips only on document load
    $(document).ready(function()
    {
       // Use the each() method to gain access to each elements attributes
       $('#content a[rel]').each(function()
       {
          $(this).qtip(
          {
             content: {
       text: '<a href="http://blogger.omg-linux.ru/2011/07/jquery.html">Скрипт сворачивания текста на jQuery</a> ' + '<br /><a href="http://blogger.omg-linux.ru/2011/07/blog-post.html">Закрываем от индексации внешние ссылки</a>' + '<br /><a href="http://blogger.omg-linux.ru/2011/07/syntaxhighlighter-blogger.html">SyntaxHighlighter - подсветка кода в blogger</a>'
    ,
       title: {
    text: 'Сцылки',
    button: 'Закрыть'
    }
    },
             position: {
                corner: {
                   target: 'bottomMiddle', // Position the tooltip above the link
                   tooltip: 'topMiddle'
                },
                adjust: {
                   screen: true // Keep the tooltip on-screen at all times
                }
             },
             show: {
                when: 'mouseover',
                solo: true // Only show one tooltip at a time
             },
             hide: 'unfocus',
             style: {
                tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                border: {
                   width: 0,
                   radius: 4
                },
                name: 'light', // Use the default light style
                width: 350 // Set the tooltip width
             }
          })
       });
    });
    </script>

Из блога код может работать не корректно, лучше брать исходник.

Получаем:

Наведите мышь!!!

Опции:

1) $('#content a[rel]') - - идентификатор кода (content), указывается в div id="content", чтобы к нужной строчке кода подключить нужный скрипт.

2) content: { text: 'My tooltip content' } - - текст, который должна содержать подсказка. Если ставите ссылки, не забывайте, что нужны в них двойные кавычки.

3)

title: {
text: 'Сцылки',
button: 'Закрыть'
}

- заголовок и кнопка закрыть.

4)

 position: {
            corner: {
               target: 'bottomMiddle', // Position the tooltip above the link
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }

- расположение подсказки.

С помощью

position: { adjust: { x: 13, y: 0 } }

позицию окна можно указать более точно.

5) show: {
when: 'mouseover' показывать при наведении указатели мыши.

6) name: 'light' - готовые стили (см. документацию)

7) width: 350 - ширина всплывающего окна

Остальные опции.