Всплывающие подсказки существенно улучшают интерфейс и делают сайт более удобным и понятным для пользователя. В стандартном исполнении они позволяют оптимизировать навигацию, улучшить внешний вид элементов управления. Однако, функциональность стандартных всплывающих подсказок ограничена, и состоит только в выводе содержимого атрибута title. Для расширения функционала данных элементов необходимо использовать плагины, например jQueryUI или Tooltipster.
Cтандартные всплывающие подсказки
Для вывода стандартной подсказки необходимо указать атрибут title элемента. Данный атрибут можно добавить к любому элементу, его содержимое выводится в подсказке при наведении курсора на элемент.
|
1 |
<a href="" class="my-link" title="это всплывающая подсказка для ссылки">ССЫЛКА</a> |
Внешний вид подсказки зависит от операционной системы и не подлежит оформлению с помощью стилей.
Использование собственного атрибута
В данном варианте можно также обойтись без jQuery. В HTML5 элементам можно назначать собственные атрибуты, для этого необходимо использовать префикс data-.
|
1 |
<a href="" class="my-link2" data-title="здесь выводится содержимое атрибута data-title">ССЫЛКА</a> |
Создадим для ссылки псевдоэлемент after, который будет появляться при наведении на ссылку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.my-link2:after{ /*обязательный параметр: наименование атрибута, содержащего текст подсказки*/ content: attr(data-title); /*обязательный параметр: по умолчанию элемент не отображается*/ display: none; /*обязательный параметр: подсказка должна иметь абсолютное позиционирование, чтобы не влиять на положение самой ссылки*/ position: absolute; /*необязательные параметры: оформление внешнего вида-*/ margin-top: 12px; margin-left: 12px; background-color: #fff; color: #26C6DA; padding: 5px; text-align: center; font-size: 12px; } |
Далее для ссылки, в качестве эффекта при наведении, указываем появление псевдоэлемента after
|
1 2 3 |
.my-link2:hover:after{ display: block; } |
Использование jQuery UI
Виджет Tooltips работает так же, как стандартная всплывающая подсказка, только его можно оформлять с помощью CSS. Для работы виджета необходимо подключить jQuery и библиотеку jQuery UI (плагин и стили).
|
1 2 3 4 5 6 |
//подключаем стили jquery ui <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/> //подключаем jquery <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> //подключаем jquery ui <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> |
Не забываем прописывать атрибут title.
|
1 |
<a href="" class="my-link" title="это всплывающая подсказка для ссылки">ССЫЛКА</a> |
Подключаем виджет к ссылке в JS
|
1 |
$('.my-link3').tooltip(); |
Вот так выглядит подсказка со стандартным стилем jqueru ui.
Можно изменить стиль передав параметр tooltipClass:
|
1 2 3 4 |
$('.my-link3').tooltip({ //в данном параметре указываем свой класс tooltipClass: "my-tooltip-class", }); |
В стилях оформляем по своему усмотрению
|
1 2 3 4 5 |
.my-tooltip-class{ background-color: #D1C4E9; font-size: 12px; } |
Виджет имеет множество настроек, как внешнего вида, так и функционала, подробнее в документации.
Tooltipster
Отличный плагин для создания красивых и функциональных всплывающих подсказок.
Возможности и преимущества
- легок в освоении и прост в применении
- поддержка и постоянное расширение функциональности
- гибкая настройка стилей, анимации и наличие тем
- размещение контента прямо в подсказке: картинки, кнопки, ссылки, меню, все что угодно
- отлично срабатывает на всех устройствах
- настройка триггеров срабатывания
- гибкое позиционирование
- назначение нескольких подсказок для одного элемента
- применение дополнительных плагинов
Быстрый старт
Для работы требуется подключенный jQuery и сам плагин со стилями Tooltipster.
|
1 2 3 4 5 |
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js">< /script> |
Создадим ссылку с атрибутом title
|
1 |
<a href="" class="my-link4" title="это всплывающая подсказка Tooltipster">ССЫЛКА</a></div> |
Вызовем метод плагина для ссылки с классом my-link4
|
1 |
$('.my_link4').tooltipster({}); |
С настройками по умолчанию подсказка выглядит вот так
Методу можно передать параметры, например тему, анимацию, задержку, триггер для срабатывания и многое другое
|
1 2 3 4 5 6 7 8 9 |
$('.my-link4').tooltipster({ //сторона появления подсказки side: 'right', //тема theme: 'tooltipster-punk', //анимация animation: 'fade' }); |
See the Pen wov_181123 by Paul (@1110000) on CodePen.
Остальные настройки рассмотрим в примерах
Пример #1
Всплывающая подсказка с интерактивной подсказкой, содержащей варианты заполнения поля input
Как уже упоминалось ранее, Tooltipster позволяет выводить HTML-content в подсказке. Создадим начальную разметку с полем Input.
|
1 |
<input class="tooltip" placeholder="укажите фамилию"> |
Также добавим шаблон: контейнер с содержимым подсказки:
|
1 2 3 4 5 6 7 8 |
<!--шаблон подсказки--> <div class="tooltip_templates"> <span id="tooltip_content"> <button class="tip_btn" onclick="surname(this)">Иванов</button> <button class="tip_btn" onclick="surname(this)">Петров</button> <button class="tip_btn" onclick="surname(this)">Сидоров</button> </span> </div> |
Отключим в стилях отображение шаблона на странице
|
1 2 |
/*скрываем содержимое шаблона */ .tooltip_templates {display: none; } |
Подключим плагин к полю вывода с классом .tooltip, в качестве содержимого подсказки в свойстве content указываем объект элемента #tooltip_content
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//подключаем плагин $('.tooltip').tooltipster({ //прописываем элемент с содержимым подсказки content: $('#tooltip_content'), //устанавливаем клик мышкой в качестве события для срабатывания trigger:'click', //установка темы theme:'tooltipster-shadow', //устанавливаем положение подсказки снизу side:'right', //включаем интерактивность: возможность взаимодействия с содержимым подсказки interactive:true }) |
Напишем функцию обработки surname() события клика по кнопке подсказки. Не забываем указывать атрибут onclick в теге кнопки, в качестве параметра передаем объект элемента по которому кликнули onclick=”surname(this).
|
1 2 3 4 5 |
function surname(sn){ $('.tooltip').val($(sn).text()) //вызываем метод close - закрываем подсказку $('.tooltip').tooltipster('close') } |
Присваиваем элементу input с классом tooltip, содержимое нажатой кнопки.
Поскольку при включенной опции интерактивности (interactive:true) событие onclick, произошедшее в пределах контейнера подсказки (клик по кнопке в нашем случае), не является триггером для закрытия подсказки, т.е. подсказка не исчезнет после нажатия на кнопку, поэтому закрываем подсказку с помощью метода ‘close’, который после окончания анимации удаляет элемент подсказки из дерева.
See the Pen wov_181123+ by Paul (@1110000) on CodePen.
