> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/tooltip.md).

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

## Общая информация <a href="#general-information" id="general-information"></a>

Компонент всплывающих подсказок - это отличная альтернатива стандартным атрибутам title. Используйте атрибут <mark style="color:orange;">`data-tooltip`</mark> вместо стандартного *title*, для работы всплывающих подсказок.

Для направления отображаемой подсказки, используйте атрибут <mark style="color:orange;">`data-tooltip-direction`</mark>.\
В качестве значения можно передать одно из доступных значений: up, down, left, right.

Вы так же можете использовать альтернативный синтаксис объединив data-tooltip и\
data-tooltip-direction в один из следующих атрибутов: <mark style="color:orange;">`data-tooltip-up`</mark>,\ <mark style="color:orange;">`data-tooltip-down`</mark>, <mark style="color:orange;">`data-tooltip-left`</mark>, <mark style="color:orange;">`data-tooltip-right`</mark> соответственно.

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/gOjVQQN>" %}
Пример работы кода выше
{% endembed %}

## Javascript

По умолчанию подсказки инстализируются автоматически при наведении на соответствующий объект. Но вы можете произвести это действие и вручную, создав экземпляр класса <mark style="color:orange;">`PipUI.Tooltip`</mark>, который принимает 2 параметра:

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

### Инициализация подсказки <a href="#init" id="init"></a>

```html
<div id="tooltip-trigger">Tooltip!</div>

<script>
    let tooltip = new PipUI.Tooltip('#tooltip-trigger', {
        content: 'My tooltip message'
    })
</script>
```

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
debug: false

// Направление выводимой подсказки
direction: 'up'

// Содержимое подсказки. При инициализации через javascript можно использовать HTML
content: ''

// Шаблон подсказки
template: '<div class="tooltip"></div>'

// Класс, который присваивается подсказке при отображении и уберается при исчезании
showedClass: 'tooltip-active'

// Функция обратного вызова, которая срабатывает при появлении подсказки
showCallback: undefined

// Функция обратного вызова, которая срабатывает при исчезании подсказки
hideCallback: undefined

// Функция обратного вызова, которая срабатывает при обновлении подсказки
updateCallback: undefined

// Объект доступных направлений
directions: {...}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
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  |