Midone - Tailwind Admin Dashboard Template

Tooltip

Basic Tooltip 

            <div class="text-center">
    <button data-tw-merge data-placement="top" title="This is awesome tooltip example!" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary tooltip cursor-pointer tooltip cursor-pointer">Show Tooltip</button>
</div>

On Click Tooltip 

            <div class="text-center">
    <button data-tw-merge data-placement="top" title="This is awesome tooltip example!" data-trigger="click" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary tooltip cursor-pointer tooltip cursor-pointer">Show Tooltip</button>
</div>

Light Tooltip 

            <div class="text-center">
    <button data-tw-merge data-placement="top" title="This is awesome tooltip example!" data-theme="light" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary tooltip cursor-pointer tooltip cursor-pointer">Show Tooltip</button>
</div>

Custom Tooltip Content 

            <!-- BEGIN: Custom Tooltip Toggle -->
<div class="text-center">
    <button data-tw-merge data-tooltip="custom-tooltip-content" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Tooltip</button>
</div>
<!-- END: Custom Tooltip Toggle -->
<!-- BEGIN: Custom Tooltip Content -->
<div class="tooltip-content">
    <div id="custom-tooltip-content" class="tippy-content">
        <div class="relative flex items-center py-1">
            <div class="image-fit h-12 w-12">
                <img class="rounded-full" src="dist/images/fakers/profile-7.jpg" alt="Midone - Tailwind Admin Dashboard Template" />
            </div>
            <div class="ml-4 mr-auto">
                <div class="font-medium leading-relaxed dark:text-slate-200">
                    Johnny Depp
                </div>
                <div class="text-slate-500 dark:text-slate-400">
                    Tailwind Admin Dashboard Template
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Custom Tooltip Content -->

Chart Tooltip

Net Worth
USP: +23% 
            <!-- BEGIN: Custom Tooltip Toggle -->
<div class="text-center">
    <button data-tw-merge data-tooltip="chart-tooltip" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary">Show Tooltip</button>
</div>
<!-- END: Custom Tooltip Toggle -->
<!-- BEGIN: Custom Tooltip Content -->
<div class="tooltip-content">
    <div id="chart-tooltip" class="tippy-content py-1 py-1">
        <div class="font-medium dark:text-slate-200">
            Net Worth
        </div>
        <div class="mt-2 flex items-center sm:mt-0">
            <div class="mr-2 flex w-20 dark:text-slate-400">
                USP:
                <span class="ml-auto font-medium text-success">
                    +23%
                </span>
            </div>
            <div class="w-24 sm:w-32 lg:w-56">
                <div class="w-auto h-[30px]">
                    <canvas class="chart simple-line-chart-1 simple-line-chart-1"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Custom Tooltip Content -->