Всплывающая подсказка : Tooltip
Легко создать красивую всплывающую подсказку.
Использование
Чтобы использовать компонент «Всплывающая подсказка», добавьте атрибут data-uk-tooltip к элементу. Вам также нужно добавить атрибут title, значение которого будет отражать текст вашей подсказки при наведении курсора на элемент.
Пример
Здесь есть что-то наведите на меня!
Разметка
<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>Выравнивание. Позиция
Добавьте один из следующих параметров в атрибут data-uk-tooltip, чтобы настроить выравнивание всплывающей подсказки.
| Атрибут | Описание | Пример |
|---|---|---|
pos:'top' |
Выравнивает подсказку по верху. | |
pos:'top-left' |
Выравнивает подсказку по левому верхнему краю. | |
pos:'top-right' |
Выравнивает всплывающую подсказку справа вверху. | |
pos:'bottom' |
Выравнивает всплывающую подсказку по нижнему краю. | |
pos:'bottom-left' |
Выравнивает всплывающую подсказку слева внизу. | |
pos:'bottom-right' |
Выравнивает всплывающую подсказку справа внизу. | |
pos:'left' |
Выравнивает всплывающую подсказку по левому краю. | |
pos:'right' |
Выравнивает всплывающую подсказку по правому краю. |
Разметка
<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>Анимация и смещение
Пример
Разметка
<span data-uk-tooltip="{animation:true, offset: 45}" title="">...</span>Параметры JavaScript
Это пример того, как установить параметры через атрибут:
data-uk-tooltip="{pos:'bottom-left'}"| Option | Possible value | Default | Описание |
|---|---|---|---|
offset |
integer | 5 | Смещение |
pos |
string | 'top' | Положение/позиция всплывающей подсказки |
animation |
boolean | false | Анимаци - эффект «Fade» |
delay |
integer | 0 | Задержка отображения всплывающей подсказки в мс |
cls |
string | '' | Пользовательский класс, добавляемый при открытии |
activeClass |
string | 'uk-active' | Toggled active class |