Tooltip

Basic Tooltip

Show example code

                                              <div class="text-center"> <a href="javascript:;" class="tooltip btn btn-primary" title="This is awesome tooltip example!">Show Tooltip</a> </div> 
                                        

On Click Tooltip

Show example code

                                              <div class="text-center"> <a href="javascript:;" data-trigger="click" class="tooltip btn btn-primary" title="This is awesome tooltip example!">Show Tooltip</a> </div> 
                                        

Light Tooltip

Show example code

                                              <div class="text-center"> <a href="javascript:;" data-theme="light" class="tooltip btn btn-primary" title="This is awesome tooltip example!">Show Tooltip</a> </div> 
                                        

Custom Tooltip Content

Show example code

                                              <!-- BEGIN: Custom Tooltip Toggle -->
 <div class="text-center"> <a href="javascript:;" data-theme="light" data-tooltip-content="#custom-content-tooltip" data-trigger="click" class="tooltip btn btn-primary" title="This is awesome tooltip example!">Show Tooltip</a> </div> <!-- END: Custom Tooltip Toggle -->
 <!-- BEGIN: Custom Tooltip Content -->
 <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="Rocketman - HTML Admin Template" class="rounded-full" src="dist/images/profile-5.jpg"> </div>
         <div class="ml-4 mr-auto">
             <div class="font-medium dark:text-slate-200 leading-relaxed">Angelina Jolie</div>
             <div class="text-slate-500 dark:text-slate-400">Bootstrap 4 HTML Admin Template</div>
         </div>
     </div>
 </div> <!-- END: Custom Tooltip Content --> 
                                        

Chart Tooltip

Show example code

                                              <!-- BEGIN: Custom Tooltip Toggle -->
 <div class="text-center"> <a href="javascript:;" data-theme="light" data-tooltip-content="#chart-tooltip" data-trigger="click" class="tooltip btn btn-primary" title="This is awesome tooltip example!">Show Tooltip</a> </div> <!-- END: Custom Tooltip Toggle -->
 <!-- BEGIN: Custom Tooltip Content -->
 <div class="tooltip-content">
     <div id="chart-tooltip" class="py-1">
         <div class="font-medium dark:text-slate-200">Net Worth</div>
         <div class="flex items-center mt-2 sm:mt-0">
             <div class="mr-2 w-20 flex dark:text-slate-500 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"> <canvas class="simple-line-chart-1" data-random="true" height="30"></canvas> </div>
         </div>
     </div>
 </div> <!-- END: Custom Tooltip Content --> 
                                        

Dark Mode