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

Если есть необходимость использовать HTML во всплывающих подсказках(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>

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

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

Положение всплывающего блока зависит от атрибута data-popup-placement, принимающего значения: 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. Quasi, sit?</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. Quasi, sit?</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. Quasi, sit?</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. Quasi, sit?</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>

Вы можете управлять всплывающими блоками с помощью javascript. Для этого в компоненте подготовлен объект pipui.popup