Tailwind CSS Tailtip - Versoly UI

Added in 1.0

Examples

<div class="w-screen h-screen flex flex-col justify-center items-center gap-3">
<span class="flex w-4 h-4 bg-dark text-white items-center justify-center rounded-full text-xs font-medium" data-toggle="tooltip">i</span>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This is a tooltip that is shown when hovered or clicked.</span>
    </div>
</div>
</div>

With Arrow

<div class="w-screen h-screen flex flex-col justify-center items-center gap-3">
<span class="flex w-4 h-4 bg-dark text-white items-center justify-center rounded-full text-xs font-medium" data-toggle="tooltip">i</span>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This is a tooltip that is shown when hovered or clicked.</span>
    </div>
    <div class="tooltip-arrow"></div>
</div>
</div>

Placement

<div class="w-screen h-screen flex flex-col justify-center items-center gap-3">
<button class="btn btn-primary" data-toggle="tooltip" data-options="{'placement': 'left'}">Left Tooltip</button>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This tooltip is shown on the left</span>
    </div>
    <div class="tooltip-arrow"></div>
</div>
<button class="btn btn-primary" data-toggle="tooltip" data-options="{'placement': 'right'}">Right Tooltip</button>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This tooltip is shown on the right</span>
    </div>
    <div class="tooltip-arrow"></div>
</div>
<button class="btn btn-primary" data-toggle="tooltip" data-options="{'placement': 'top'}">Top Tooltip</button>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This tooltip is shown on the top</span>
    </div>
    <div class="tooltip-arrow"></div>
</div>
<button class="btn btn-primary" data-toggle="tooltip" data-options="{'placement': 'bottom'}">Bottom Tooltip</button>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This tooltip is shown on the bottom</span>
    </div>
    <div class="tooltip-arrow"></div>
</div>
</div>

Toggle on click

<div class="w-screen h-screen flex flex-col justify-center items-center gap-3">
<button class="btn btn-primary" data-toggle="tooltip" data-options="{'trigger': 'click'}">Tooltip is opened when clicked</button>
<div class="tooltip" role="tooltip">
    <div class="tooltip-inner">
        <span>This tooltip is shown when clicked</span>
    </div>
    <div class="tooltip-arrow"></div>
</div>
</div>