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

Если есть необходимость использовать HTML во всплывающих подсказках([tooltip](/components/tooltip.md)), то вам могут помочь всплывающие блоки.

```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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v1-6-0.pipui.ru/components/popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.