Библиотека jQuery UI. Виджет Tooltip

Библиотека jQuery UI. Виджет Tooltip

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как быстро организовать всплывающие подсказки для элементов вашей страницы, сделать это поможет виджет Tooltip.

Итак, друзья, еще один плагин библиотеки jQuery UI, который мы рассмотрим в данной статье – это плагин Tooltip. Как следует из названия, плагин позволяет организовать всплывающие подсказки для элементов страницы: ссылки, элементы форм, картинки и т.п.

Работать с плагином Tooltip предельно просто. Для его работы достаточно добавить нужному элементу атрибут title, значением которого указать текст всплывающей подсказки. Собственно, и все, остальное за вас сделает используемый виджет библиотеки jQuery UI. Несколько простых примеров помогут понять суть работы с плагином:

<a href="#" title="Текст подсказки для ссылки">Link</a>
<input type="text" title="Текст подсказки для поля формы">

Библиотека jQuery UI. Виджет Tabs

Сейчас, если навести курсор мыши на элемент, — мы увидим стандартную всплывающую подсказку, которую рисует браузер для атрибута title. Теперь попробуем использовать метод tooltip() для элементов блока:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
$(function(){
 $('.content').tooltip();
});

Библиотека jQuery UI. Виджет Tabs

Вот так вот достаточно просто мы можем изменить стандартную подсказку браузера для атрибута title на более продвинутое оформление с помощью плагина Tooltip. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree