Tooltip

Basic Tooltip

            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                HTMLOpenTagbutton
    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"
HTMLCloseTagShow TooltipHTMLOpenTag/buttonHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
            
        

On Click Tooltip

            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                HTMLOpenTagbutton
    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"
HTMLCloseTagShow TooltipHTMLOpenTag/buttonHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
            
        

Light Tooltip

            
                HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                HTMLOpenTagbutton
    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"
HTMLCloseTagShow TooltipHTMLOpenTag/buttonHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
            
        

Custom Tooltip Content

Midone - Tailwind Admin Dashboard Template
Russell Crowe
Tailwind Admin Dashboard Template
            
                HTMLOpenTag!-- BEGIN: Custom Tooltip Toggle --HTMLCloseTag
                            HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                HTMLOpenTagbutton
    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"
HTMLCloseTagShow TooltipHTMLOpenTag/buttonHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag!-- END: Custom Tooltip Toggle --HTMLCloseTag
                            HTMLOpenTag!-- BEGIN: Custom Tooltip Content --HTMLCloseTag
                            HTMLOpenTagdiv class="tooltip-content"HTMLCloseTag
                                HTMLOpenTagdiv
    id="custom-tooltip-content"
    class="tippy-content"
HTMLCloseTag
    HTMLOpenTagdiv class="relative flex items-center py-1"HTMLCloseTag
                                        HTMLOpenTagdiv class="image-fit h-12 w-12"HTMLCloseTag
                                            HTMLOpenTagimg
                                                class="rounded-full"
                                                src="dist/images/fakers/profile-15.jpg"
                                                alt="Midone - Tailwind Admin Dashboard Template"
                                            /HTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-4 mr-auto"HTMLCloseTag
                                            HTMLOpenTagdiv class="font-medium leading-relaxed dark:text-slate-200"HTMLCloseTag
                                                Russell Crowe
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="text-slate-500 dark:text-slate-400"HTMLCloseTag
                                                Tailwind Admin Dashboard Template
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag!-- END: Custom Tooltip Content --HTMLCloseTag
            
        

Chart Tooltip

Net Worth
USP: +23%
            
                HTMLOpenTag!-- BEGIN: Custom Tooltip Toggle --HTMLCloseTag
                            HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                HTMLOpenTagbutton
    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"
HTMLCloseTagShow TooltipHTMLOpenTag/buttonHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag!-- END: Custom Tooltip Toggle --HTMLCloseTag
                            HTMLOpenTag!-- BEGIN: Custom Tooltip Content --HTMLCloseTag
                            HTMLOpenTagdiv class="tooltip-content"HTMLCloseTag
                                HTMLOpenTagdiv
    id="chart-tooltip"
    class="tippy-content py-1 py-1"
HTMLCloseTag
    HTMLOpenTagdiv class="font-medium dark:text-slate-200"HTMLCloseTag
                                        Net Worth
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-2 flex items-center sm:mt-0"HTMLCloseTag
                                        HTMLOpenTagdiv class="mr-2 flex w-20 dark:text-slate-400"HTMLCloseTag
                                            USP:
                                            HTMLOpenTagspan class="ml-auto font-medium text-success"HTMLCloseTag
                                                +23%
                                            HTMLOpenTag/spanHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="w-24 sm:w-32 lg:w-56"HTMLCloseTag
                                            HTMLOpenTagdiv class="w-auto h-[30px]"HTMLCloseTag
    HTMLOpenTagcanvas
    class="chart simple-line-chart-1 simple-line-chart-1"
HTMLCloseTagHTMLOpenTag/canvasHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag!-- END: Custom Tooltip Content --HTMLCloseTag