Подсказка
Легко создать красиво смотреть подсказку.
Использование
Для установки этого компонента, добавить 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>
JavaScript опции
Это пример того, как устанавливать параметры через атрибут:
data-uk-tooltip="{pos:'bottom-left'}"
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
offset |
integer | 5 | Смещение исходного элемента |
pos |
string | 'top' | Положение подсказки |
animation |
boolean | false | Увядает в подсказке |
delay |
integer | 0 | Задержка подсказки в мс |
cls |
string | '' | Пользовательский класс на отображение |
activeClass |
string | 'uk-active' | Переключать активный класс |