Компонент Всплывающая подсказка 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-center Позиция всплывающей подсказки.
offset Number false Смещение всплывающей подсказки.
animation String uk-animation-scale-up Разделенные пробелами имена используемых анимаций. Запятая отдельно для анимации.
duration Number 100 Продолжительность анимации.
delay Number 0 Задержка отображения.
cls String uk-active Активный класс.
container String body Определите целевой контейнер с помощью селектора, чтобы указать, куда в DOM должна быть добавлена всплывающая подсказка.

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