Компонент Всплывающая подсказка Tooltip
С легкостью создавайте красивые всплывающие подсказки. Задержка при появлении. Установка необходимой позиции.
Руководство
Чтобы применить компонент Всплывающая подсказка, добавьте атрибут uk-tooltip
к элементу. Вам также необходимо добавить в атрибут параметр title: TEXT
, значение которого и будет представлять текст вашей подсказки. Всё просто!
<div uk-tooltip="title: Всплывающая подсказка"></div>
Если title
это единственный параметр в значении атрибута, вы можете использовать упрощённую запись uk-tooltip="TEXT"
.
<div uk-tooltip="Отличного настроения!"></div>
Позиция
Выравнивание всплывающей подсказки
Добавьте один из следующих параметров в атрибут 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>
Задержка появления
Delay
Если вы хотите, чтобы всплывающая подсказка появлялась с небольшой задержкой, просто добавьте к атрибуту uk-tooltip
параметр delay
с вашим значением в миллисекундах.
<div uk-tooltip="title: Привет красота!; delay: 550"></div>
Пример
Всплывающая подсказка с задержкой при появлении
-
-
<button class="uk-button uk-button-default" uk-tooltip="title: Небольшая задержка!; delay: 550">Наведи на меня</button>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.tooltip(element, options);
Пример: Стилизуем глобальный атрибут title
элемента HTML abbr.
События
Следующие события будут инициированы для элементов компонента «Tooltip»:
Имя события | Описание |
---|---|
beforeshow |
Срабатывает до отображения элемента. Может предотвратить отображение, вернув false . |
show |
Срабатывает после отображения элемента. |
shown |
Запускается после завершения анимации показанного элемента. |
beforehide |
Срабатывает до того, как элемент спрятан. Может предотвратить скрытие, вернув false . |
hide |
Срабатывает после запуска анимации скрытия элемента. |
hidden |
Срабатывает после того, как элемент спрятан. |
Пример
UIkit.util.on(document, 'show', '.uk-tooltip.uk-active', function() {
// делаем что-нибудь
});
Методы
Для компонента «Tooltip» доступны следующие методы:
Show
UIkit.tooltip(element).show();
Показывает подсказку.
Hide
UIkit.tooltip(element).hide();
Скрывает подсказку.
Доступность
Компонент Tooltip придерживается Tooltip Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
- Элемент с подсказкой имеет идентификатор (ID).
-
Всплывающая подсказка имеет роль
tooltip
и свойствоaria-describedby
, установленное на идентификатор элемента с всплывающей подсказкой.