Компонент Всплывающая подсказка Tooltip

С легкостью создавайте красивые всплывающие подсказки. Задержка при появлении. Установка необходимой позиции.

Руководство

Чтобы применить компонент Всплывающая подсказка, добавьте атрибут uk-tooltip к элементу. Вам также необходимо добавить в атрибут параметр title: TEXT, значение которого и будет представлять текст вашей подсказки. Всё просто!

<div uk-tooltip="title: Всплывающая подсказка"></div>

Если title это единственный параметр в значении атрибута, вы можете использовать упрощённую запись uk-tooltip="TEXT".

<div uk-tooltip="Отличного настроения!"></div>

<button class="uk-button uk-button-primary" uk-tooltip="Вот это радость!">Наведи на меня</button>

Позиция

Выравнивание всплывающей подсказки

Добавьте один из следующих параметров в атрибут 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>

Параметры для атрибута

При использовании компонента 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="Веселый сон!"></span>

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, установленное на идентификатор элемента с всплывающей подсказкой.