Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Tinker
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Morgan Freeman
morganfreeman@left4code.com
Al Pacino
alpacino@left4code.com
Johnny Depp
johnnydepp@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
Products
Nike Tanjun
Sport & Outdoor
Samsung Q90 QLED TV
Electronic
Samsung Q90 QLED TV
Electronic
Sony A7 III
Photography

## Tooltip

## Basic Tooltip

Show example code

                    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

Show example code

                    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

Show example code

                    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

Show example code
Tom Cruise
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
                                                    Tom Cruise
                                                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

Show example code
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