Компонент Всплывающая подсказка : 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();

Скрывает подсказку.

Документация
Компоненты