Обзор всплывающих подсказок на jQuery. Наверху самые лучшие, в низу - простые, не имеющие дополнительных возможностей, кроме как отображения текста! Для всех подсказок лучше, чем здесь - просьба указывать их адрес в комментариях! В низу страницы указан список всех найденных автором всплывающих подсказок на jQuery, которые в некоторых случаях могут пригодиться Вам.

Оглавление статьи "Всплывающие подсказки jQuery!"

• 1. Подсказки qTip!
  • 1.1. Описание qTip
  • 1.2. Структура и код qTip
  • 1.3. Базовый пример qTip
  • 1.4. Объекты метода qtip
  • 1.5. Пример ajax qTip
  • 1.6. Загрузить qTip архивом
• 2. Для тех, кто не любит сложностей - подсказки TipTip!
• 3. jQuery tools ToolTip!
• 4. Simple TIP!
• 5. Дополнительные всплывающие подсказки!
• Заключение!

1. Подсказки qTip!

1.1. Описание qTip!

На первом месте заслужено находится qTip. Подсказки qTip поддерживают следующие возможности:

1. поддержка всеми популярными браузерами - IE 6+,FF 2.0+, Opera 9.0+,Safari 3.0 +, Konqueror 3.5 +
2. поддержка закруглённых углов;
3. всплывающие подсказки передвигаются вместе с передвижением курсора;
4. позиционирование индикатора;
5. изменяемость стилей подсказки;
6. подсказки не перекрывают друг друга при нахождении в стеке;
7. установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
8. динамически загружаемое содержимое методом jquery ajax;
9. поддержка изображений;
10. поддержка видео от youTube;
11. подробная документация на английском;

 

Для установки и использования qTip нам понадобятся два файла - jquery.qtip-1.0.0.min.js, jquery-1.3.2.min.js. Указанные файлы по умолчанию находятся в архиве на сайте разработчиков, однако, в дополнение к этим файлам Вы можете скачать дополнительные файлы – неминимизированные файлы js, так же на сайте разработчиков. Подключите указанные два файла во вновь созданной папке "qtip":

<script type="text/javascript" src="qtip/jquery.1.3.2.min.js"></script> <script type="text/javascript" src="qtip/jquery.qtip-1.0.0.min.js"></script>

1.2. Структура и код qTip!

После подключения файлов создаётся HTML структура для каждой подсказки, не пугайтесь, Вам не придется работать с этой структурой, это всего лишь структура всплывающей подсказки (и нужна она лишь разработчикам):

<div class="qtip qtip-stylename"> <div class="qtip-tip" rel="cornerValue"></div> <div class="qtip-wrapper"> <div class="qtip-borderTop"></div> // только для закруглённых углов <div class="qtip-contentWrapper"> <div class="qtip-title"> // CSS стили... <div class="qtip-button"></div> </div> <div class="qtip-content"></div> </div> <div class="qtip-borderBottom"></div> // только для закруглённых углов </div> </div>

1.3. Базовый пример qTip!

После того как мы подключили javascript библиотеки нужно использовать jQuery для создания подсказки, например в следующем примере для всех ссылок содержащих атрибут title будет создана всплывающая подсказка:

jQuery(function(){ $('a[title]').qtip({ style: { border: { width: 3, radius: 8, color: '#6699CC' }, tip: true } }) });

Пример 1. Наведите курсор на эту подсказку - Подсказка 1..

Пример 2. Вечная подсказка - Подсказка 2.

1.4. Объекты метода qtip

В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.

1. Show - объект, настраивающий параметры отображения подсказки
2. Hide - объект, настраивающий параметры сокрытия подсказки
3. Position - объект, настраивающий расположение подсказки;
4. Content - объект, определяющий тип содержимого подсказки;
5. Style - объект, отвечающий за стиль подсказки

5. Пример ajax qTip!

Подсказки qTip могут загружать контент через jquery ajax, для этого

jQuery(function(){ $("#ajaxtip").qtip({ style: { width:300, border: { width: 3, radius: 8, color: '#6699CC' } }, content: { url: 'qtip/localcontent.html' }, position: { adjust: { screen: true } } }); });

Пример 2. Праздность — корень всему злу, особливо военному человеку. - Подсказка с удаленной страницы!.

Обратите внимание на строку:

position: { adjust: { screen: true } }

она запрещает появление подсказки за пределами окна

Всего в метод qtip() передаются три объекта - style, content, position. Содержимое загружаемой страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> </head> <body> <h3>Заголовок подсказки</h3> <img src="qtip/qtip.png" style="float:left;"/> <p>Возненавидеть жизнь можно только вследствие апатии и лени.</p> <p>Прекращение деятельности всегда приводит за собой вялость, а за вялостью идет дряхлость.</p> </body> </html>

1.6. Загрузить qTip архивом

 Загрузить qTip архивом

2. Подсказки TipTip!

Подсказки TipTip не требуют особых знаний jQuery, для их использования нужно подключить всего лишь следующие файлы:

<script src="../../jsfiles/jquery-1.5.min.js"></script> <script src="jquery.tipTip.js"></script> <link href="tipTip.css" rel="stylesheet" type="text/css" media="screen, projection" />

Сама подсказка TipTip создаётся следующим jQuery:

$(function(){ $(".someClass").tipTip(); });

Пример 3. Подсказки TipTip. - наведите здесь курсор - "Подсказка"..

 Загрузить TipTip архивом

3. jQuery tools ToolTip!

Менее интересный пример всплывающей подсказки - пример 4.

4. Simple TIP!

Подсказка - пример 4.

5. Дополнительные всплывающие подсказки!

Менее интересные подсказки, которые могут Вас заинтересовать:

• Tipsy
• BeautyTips
• Hovertips
• BetterTip

Заключение

Просьба всех интересующихся jQuery сообщать о новых подсказках на jQuery в комментариях.