Компонент Всплывающая подсказка : Tooltip
С легкостью создавайте красивые всплывающие подсказки. Задержка при появлении. Установка необходимой позиции.
Tooltip. Руководство по использованию
Чтобы применить компонент Всплывающая подсказка, добавьте атрибут uk-tooltip
к элементу. Вам также необходимо добавить в атрибут параметр title: TEXT
, значение которого и будет представлять текст вашей подсказки. Всё просто!
<div uk-tooltip="title: Всплывающая подсказка"></div>
Если title
это единственный параметр в значении атрибута, вы можете использовать упрощённую запись uk-tooltip="TEXT"
.
<div uk-tooltip="Отличного настроения!"></div>
Tooltip по умолчанию
-
-
<button class="uk-button uk-button-primary" uk-tooltip="Вот это радость!">Наведи на меня</button>
Позиции Tooltip
Добавьте один из следующих параметров в атрибут uk-tooltip
, чтобы настроить выравнивание всплывающей подсказки.
<button uk-tooltip="title: Добрый день; pos: top-left"></button>
Атрибут | Описание |
---|---|
pos: top |
Выравнивает всплывающую подсказку сверху. |
pos: top-left |
Устанавливает подсказку с левого верхнего края. |
pos: top-right |
Устанавливает подсказку с правого верхнего края. |
pos: bottom |
Выравнивает всплывающую подсказку понизу. |
pos: bottom-left |
Устанавливает подсказку с нижнего левого края. |
pos: bottom-right |
Устанавливает подсказку с нижнего правого края. |
pos: left |
Выравнивает всплывающую подсказку слева. |
pos: right |
Выравнивает всплывающую подсказку справа. |
-
-
<p uk-margin> <button class="uk-button uk-button-default" uk-tooltip="Я сверху!">Top</button> <button class="uk-button uk-button-default" uk-tooltip="title: Сверху слева; pos: top-left">Top Left</button> <button class="uk-button uk-button-default" uk-tooltip="title: Я сверху справа!; pos: top-right">Top Right</button> <button class="uk-button uk-button-default" uk-tooltip="title: Я снизу!; pos: bottom">Bottom</button> <button class="uk-button uk-button-default" uk-tooltip="title: Я снизу слева!; pos: bottom-left">Bottom Left</button> <button class="uk-button uk-button-default" uk-tooltip="title: Я снизу справа!; pos: bottom-right">Bottom Right</button> <button class="uk-button uk-button-default" uk-tooltip="title: Я слева!; pos: left">Left</button> <button class="uk-button uk-button-default" uk-tooltip="title: Я справа!; pos: right">Right</button> </p>
Задержка появления
Если вы хотите, чтобы всплывающая подсказка появлялась с небольшой задержкой, просто добавьте к атрибуту uk-tooltip
параметр delay
с вашим значением в миллисекундах.
<div uk-tooltip="title: Привет красота!; delay: 550"></div>
Всплывающая подсказка с задержкой при появлении
-
-
<button class="uk-button uk-button-default" uk-tooltip="title: Небольшая задержка!; delay: 550">Наведи на меня</button>
Опции компонента
При использовании компонента Tooltip к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
title |
String |
|
Текст подсказки. |
pos |
String | top |
Позиция всплывающей подсказки. |
offset |
Number | false |
Смещение всплывающей подсказки. |
animation |
String | uk-animation-scale-up |
Разделенные пробелами имена используемых анимаций. Запятая отдельно для анимации. |
duration |
Number | 100 |
Продолжительность анимации. |
delay |
Number | 0 |
Задержка отображения. |
cls |
String | uk-active |
Активный класс. |
title
является Primary опцией.
Если title
это единственный параметр в значении атрибута, то её ключ можно не использовать.
<span uk-tooltip="Hello World"></span>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.tooltip(element, options);
События
Следующие события будут инициированы для элементов компонента «Tooltip»:
Название | Описание |
---|---|
beforeshow |
Срабатывает до отображения элемента. Может предотвратить отображение, вернув false . |
show |
Срабатывает после отображения элемента. |
shown |
Запускается после завершения анимации показанного элемента. |
beforehide |
Срабатывает до того, как элемент спрятан. Может предотвратить скрытие, вернув false . |
hide |
Срабатывает после запуска анимации скрытия элемента. |
hidden |
Срабатывает после того, как элемент спрятан. |
Пример
UIkit.util.on(document, 'show', '.uk-tooltip.uk-active', function() {
// do something
});
Методы
Для компонента «Tooltip» доступны следующие методы:
Show
UIkit.tooltip(element).show();
Показывает подсказку.
Hide
UIkit.tooltip(element).hide();
Скрывает подсказку.