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

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

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

Значение атрибута data-popup служит определяющим элементом, который вызовет блок .popup

Скрытие всплывающего блока можно контролировать, добавив атрибут data-popup-closeover к блоку с классом .popup.

Таким образом, при нажатии на область вне блока .popup, все остальные блоки .popup с атрибутом data-popup-closeover будут автоматически скрыты.

Положение всплывающего блока зависит от атрибута data-popup-placement, принимающего значения: left, top(по умолчанию), right и bottom.

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

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

PreviousПодсвечивающиеся блоки NextСлайдер

Last updated 1 year ago

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

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