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

Если есть необходимость использовать HTML во всплывающих подсказках([tooltip](https://v1-6-0.pipui.ru/components/tooltip)), то вам могут помочь всплывающие блоки.

```html
<div id="popup-1" class="popup">
    <div class="popup-header">Header</div>
    <div class="popup-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, sit?</div>
</div>
<button class="btn" data-popup="#popup-1">Пример</button>
```

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

Значение атрибута <mark style="color:orange;">`data-popup`</mark> служит определяющим элементом, который вызовет блок <mark style="color:orange;">`.popup`</mark>

Скрытие всплывающего блока можно контролировать, добавив атрибут\ <mark style="color:orange;">`data-popup-closeover`</mark> к блоку с классом <mark style="color:orange;">`.popup`</mark>.

Таким образом, при нажатии на область вне блока <mark style="color:orange;">`.popup`</mark>, все остальные блоки <mark style="color:orange;">`.popup`</mark> с атрибутом <mark style="color:orange;">`data-popup-closeover`</mark> будут автоматически скрыты.

Положение всплывающего блока зависит от атрибута <mark style="color:orange;">`data-popup-placement`</mark>, принимающего значения: **left**, **top**(по умолчанию), **right** и **bottom**.

Так или иначе, в случае недостатка места на экране для отображения в заданном направлении, компонент будет искать новое направление автоматически.

```html
<div id="popup-2" class="popup" data-popup-placement="left">
    <div class="popup-header">Header</div>
    <div class="popup-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div id="popup-3" class="popup" data-popup-placement="top">
    <div class="popup-header">Header</div>
    <div class="popup-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div id="popup-4" class="popup" data-popup-placement="bottom">
    <div class="popup-header">Header</div>
    <div class="popup-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<div id="popup-5" class="popup" data-popup-placement="right">
    <div class="popup-header">Header</div>
    <div class="popup-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
<button class="btn" data-popup="#popup-2">Слева</button>
<button class="btn" data-popup="#popup-3">Сверху</button>
<button class="btn" data-popup="#popup-4">Снизу</button>
<button class="btn" data-popup="#popup-5">Справа</button>
```

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