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

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