От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как быстро организовать всплывающие подсказки для элементов вашей страницы, сделать это поможет виджет Tooltip.
Итак, друзья, еще один плагин библиотеки jQuery UI, который мы рассмотрим в данной статье – это плагин Tooltip. Как следует из названия, плагин позволяет организовать всплывающие подсказки для элементов страницы: ссылки, элементы форм, картинки и т.п.
Работать с плагином Tooltip предельно просто. Для его работы достаточно добавить нужному элементу атрибут title, значением которого указать текст всплывающей подсказки. Собственно, и все, остальное за вас сделает используемый виджет библиотеки jQuery UI. Несколько простых примеров помогут понять суть работы с плагином:
1 2 |
<a href="#" title="Текст подсказки для ссылки">Link</a> <input type="text" title="Текст подсказки для поля формы"> |
Сейчас, если навести курсор мыши на элемент, — мы увидим стандартную всплывающую подсказку, которую рисует браузер для атрибута title. Теперь попробуем использовать метод tooltip() для элементов блока:
1 2 3 |
$(function(){ $('.content').tooltip(); }); |
Вот так вот достаточно просто мы можем изменить стандартную подсказку браузера для атрибута title на более продвинутое оформление с помощью плагина Tooltip. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!