Всплывающие подсказки
Общая информация
Компонент всплывающих подсказок - это отличная альтернатива стандартным атрибутам title. Используйте атрибут data-tooltip
вместо стандартного title, для работы всплывающих подсказок.
Для направления отображаемой подсказки, используйте атрибут data-tooltip-direction
.
В качестве значения можно передать одно из доступных значений: up, down, left, right.
Вы так же можете использовать альтернативный синтаксис объединив data-tooltip и
data-tooltip-direction в один из следующих атрибутов: data-tooltip-up
,
data-tooltip-down
, data-tooltip-left
, data-tooltip-right
соответственно.
<a href="#" data-tooltip="Стандартная подсказка">По умолчанию</a> |
<a href="#" data-tooltip-left="Подсказка слева!">Слева</a> |
<a href="#" data-tooltip-up="Подсказка сверху!">Сверху</a> |
<a href="#" data-tooltip-down="Подсказка снизу!">Снизу</a> |
<a href="#" data-tooltip-right="Подсказка справа!">Справа</a> |
<a href="#" data-tooltip="Подсказка справа!" data-tooltip-direction="down">Справа</a>
Javascript
По умолчанию подсказки инстализируются автоматически при наведении на соответствующий объект. Но вы можете произвести это действие и вручную, создав экземпляр класса PipUI.Tooltip
, который принимает 2 параметра:
Инициатор события (ссылка или объект)
Объект опций
Инициализация подсказки
<div id="tooltip-trigger">Tooltip!</div>
<script>
let tooltip = new PipUI.Tooltip('#tooltip-trigger', {
content: 'My tooltip message'
})
</script>
Опции
// Выводить в консоль отладку
debug: false
// Направление выводимой подсказки
direction: 'up'
// Содержимое подсказки. При инициализации через javascript можно использовать HTML
content: ''
// Шаблон подсказки
template: '<div class="tooltip"></div>'
// Класс, который присваивается подсказке при отображении и уберается при исчезании
showedClass: 'tooltip-active'
// Функция обратного вызова, которая срабатывает при появлении подсказки
showCallback: undefined
// Функция обратного вызова, которая срабатывает при исчезании подсказки
hideCallback: undefined
// Функция обратного вызова, которая срабатывает при обновлении подсказки
updateCallback: undefined
// Объект доступных направлений
directions: {...}
Методы
let tooltip = new PipUI.Dropdown();
tooltip.getID() // Вернет уникальный идентификатор подсказки
tooltip.setOptions(object) // Изменить опции подсказки. DOM не будет изменен
// до вызова метода tooltip.update()
tooltip.getOptions() // Получить опции подсказки
tooltip.update() // Отрендерит подсказку заново.
// По умолчанию производится при каждом появлении подсказки
tooltip.isOpen() // Отображена ли в текущий момент подсказка
tooltip.hide(callback) // Скрыть подсказку
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
tooltip.show(callback) // Отобразить подсказку
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
События
update-tooltip-pipui
Срабатывает при обновлении тултипа
.tooltip
show-tooltip-pipui
Срабатывает при начале появления тултипа
.tooltip
hide-tooltip-pipui
Срабатывает при начале исчезания тултипа
.tooltip
showed-tooltip-pipui
Срабатывает при окончании появления тултипа
.tooltip
hided-tooltip-pipui
Срабатывает при окончании исчезания тултипа
.tooltip
Last updated