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