Tooltip

<div class="text-center"> <a href="javascript:;" data-event="on-click" class="tooltip button inline-block bg-theme-1 text-white" title="This is awesome tooltip example!">Show Tooltip</a> </div>

Light Tooltip

Show code

<div class="text-center"> <a href="javascript:;" data-theme="light" class="tooltip button inline-block bg-theme-1 text-white" title="This is awesome tooltip example!">Show Tooltip</a> </div>

Custom Content Tooltip

Show code

<div class="text-center"> <a href="javascript:;" data-theme="light" data-tooltip-content="#custom-content-tooltip" data-event="on-click" class="tooltip button inline-block bg-theme-1 text-white" title="This is awesome tooltip example!">Show Tooltip</a> </div>
<div class="tooltip-content">
    <div id="custom-content-tooltip" class="relative flex items-center py-1">
        <div class="w-12 h-12 image-fit"> <img alt="Midone Tailwind HTML Admin Template" class="rounded-full" src="dist/images/profile-11.jpg"> </div>
        <div class="ml-4 mr-auto">
            <div class="font-medium leading-relaxed">Al Pacino</div>
            <div class="text-gray-600">Bootstrap 4 HTML Admin Template</div>
        </div>
    </div>
</div>

Chart Tooltip

Show code

<div class="text-center"> <a href="javascript:;" data-theme="light" data-tooltip-content="#chart-tooltip" data-event="on-click" class="tooltip button inline-block bg-theme-1 text-white" title="This is awesome tooltip example!">Show Tooltip</a> </div>
<div class="tooltip-content">
    <div id="chart-tooltip" class="py-1">
        <div class="font-medium">Net Worth</div>
        <div class="flex items-center mt-2 sm:mt-0">
            <div class="mr-2 w-20 flex"> USP:<span class="ml-auto font-medium text-theme-9">+23%</span> </div>
            <div class="w-24 sm:w-32 lg:w-56"> <canvas class="simple-line-chart-1" data-random="true" height="50"></canvas> </div>
        </div>
    </div>
</div>