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

Легко и просто создавайте стилизованные всплывающие подсказки.

Как использовать всплывающие подсказки

Для начала работы с компонентом добавьте атрибут uk-tooltip к элементу. Не забудьте добавить к атрибуту оцию вида title: TEXT, чтобы добавить текст вплывающей подсказки.

<div uk-tooltip="title: Hello World"></div>

Если title является единственной опцией в значении атрибута, вы также можете использовать сокращенный вариант —uk-tooltip = "TEXT"

<div uk-tooltip="Я подсказка"></div>

  • <button class="uk-button uk-button-default" 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, а также задайте значение в миллисекундах.

<div uk-tooltip="title: Я подсказка; delay: 500"></div>

  • <button class="uk-button uk-button-default" uk-tooltip="title: Я подсказка; delay: 500">Наведите</button>

Все опции компонента

В таблице ниже перечислены доступные настройки для атрибута uk-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 — Основная опция, и можно пропустить, если это единственный параметр в значении атрибута.

<span uk-tooltip="Я подсказка"></span>

JavaScript

Подробнее о JavaScript компонентах.

Инициализация

UIkit.tooltip(element, options);

События

Для компонента доступны следующие события:

Имя Описание
beforeshow Срабатывает до появления объекта. Может отменить появление, вернув false.
show Срабатывает после появления объекта.
shown Срабатывает после завершения анимации появления объекта.
beforehide Срабатывает до скрытия объекта. Может отменить скрытие, вернувfalse.
hide Срабатывает после запуска анимации исчезновения объекта.
hidden Срабатывает после скрытия объекта.

Пример JS

UIkit.util.on(document, 'show', '.uk-tooltip.uk-active', function() {
  // do something
});

Методы

Для компонента доступны следующие методы:

Show

UIkit.tooltip(element).show();

Отображает подсказку.

Hide

UIkit.tooltip(element).hide();

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