Компонент всплывающих подсказок - это отличная альтернатива стандартным атрибутам 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 соответственно.
По умолчанию подсказки инстализируются автоматически при наведении на соответствующий объект. Но вы можете произвести это действие и вручную, создав экземпляр класса 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 является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
