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

Общая информация

Компонент всплывающих подсказок - это отличная альтернатива стандартным атрибутам 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 параметра:

1. Инициатор события (ссылка или объект)

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