Tippy.js is a JavaScript library that creates tooltips, popovers, dropdowns, and menus for the web. It's compatible with touch, keyboard, and mouse inputs.
<a href="#!"
class="btn btn-ghost btn-icon rounded-circle
texttooltip" data-template="voiceCall">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-phone-call"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5
2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
<path d="M15 7a2 2 0 0 1 2 2" />
<path d="M15 3a6 6 0 0 1 6 6" />
</svg>
<div id="voiceCall" class="d-none">
<span>Call</span>
</div>
</a><a href="#!"
class="text-inherit texttooltip" data-template="message">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, facilis?
<div id="message" class="d-none">
<span>I'am Paragraph.</span>
</div>
</a> <a href="#!"
class="texttooltip btn btn-primary" data-template="button">Text</a>
<div id="button" class="d-none">
<span>Message</span>
</div>