> For the complete documentation index, see [llms.txt](https://v1-6-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://v1-6-0.pipui.ru/components/tooltip.md).

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

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

Для направления отображения используйте альтернативный синтаксис <mark style="color:orange;">`data-tooltip-left`</mark>, <mark style="color:orange;">`data-tooltip-right`</mark>, <mark style="color:orange;">`data-tooltip-top`</mark>, <mark style="color:orange;">`data-tooltip-bottom`</mark> (слева, справа, сверху, снизу соответственно).

```html
<a href="#" data-tooltip="Стандартная подсказка">По умолчанию</a> |
<a href="#" data-tooltip-left="Подсказка слева!">Слева</a> |
<a href="#" data-tooltip-top="Подсказка сверху!">Сверху</a> |
<a href="#" data-tooltip-bottom="Подсказка снизу!">Снизу</a> |
<a href="#" data-tooltip-right="Подсказка справа!">Справа</a>
```

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