Tooltip

ADMIN PANEL

Default Tooltip

You can use tooltip in anywhere in code and it's default position is top.

Preview Html 
 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button class="text-white btn btn-primary" tooltip="Always top">Default Top</button>
  </div> 
</div>

Focused Tooltip

Set the focus tooltip. .tooltip-open

Preview Html 
 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button class="btn bg-primaryLight" tooltip="Focused" class="hover:bg-primary hover:text-white focus:bg-primary focus:border-primary focus:text-white>Focused</button>
  </div> 
</div>

Tooltip Position

You can set the position of tooltips using top / left / right / bottom

Preview Html 
 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button class="text-white btn btn-primary" tooltip="Top tooltip" flow="top">Top Position</button>
      <button class="text-white btn btn-primary" tooltip="Left tooltip" flow="left">Left Position</button>
      <button class="text-white btn btn-primary" tooltip="Right tooltip" flow="right">Right Position</button>
      <button class="text-white btn btn-primary" tooltip="Bottom tooltip" flow="bottom">Bottom Position</button>
  </div> 
</div>;

Tooltip Outline

You can set the position of tooltips using up / left / right / bottom with the outline.

Preview Html 
 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button class="border btn border-primary" tooltip="Top tooltip" flow="top">Top Tooltip</button>
      <button class="border btn border-primary" tooltip="Left tooltip" flow="left">Left Tooltip</button>
      <button class="border btn border-primary" tooltip="Right tooltip" flow="right">Right Tooltip</button>
      <button class="border btn border-primary" tooltip="Bottom tooltip" flow="bottom">Bottom Tooltip</button>
  </div> 
</div>;

Filled Tooltip

You can set the position of tooltips using up / left / right / bottom with focus.

Preview Html 
 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button class="btn btn-outline btn-primary" tooltip="Top tooltip" flow="top">Top Tooltip</button>
      <button class="btn btn-outline btn-primary" tooltip="Left tooltip" flow="left">Left Tooltip</button>
      <button class="btn btn-outline btn-primary" tooltip="Right tooltip" flow="right">Right Tooltip</button>
      <button class="btn btn-outline btn-primary" tooltip="Bottom tooltip" flow="bottom">Bottom Tooltip</button>
  </div> 
</div>;

Colored Tooltip

You can set the tooltips with colored using btn- *class.

Preview Html 
 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button class="text-white btn btn-primary" tooltip="Primary">Primary</button>
      <button class="text-white btn btn-secondary" tooltip="Secondary">Secondary</button>
      <button class="text-white btn btn-info" tooltip="Info">Info</button>
      <button class="text-white btn btn-success" tooltip="Success">Success</button>
      <button class="text-white btn btn-warning" tooltip="Warning">Warning</button>
      <button class="text-white btn btn-danger" tooltip="Danger">Danger</button>
      <button class="btn btn-light text-dark" tooltip="Light">Light</button>
  </div> 
</div>;

Inline Tooltip Content

You can set the content in tooltip. .tooltip-( primary, secondary, success, info, warning, error)

Preview Html

Here, is some content about tooltips that you can set the tooltip inside the content with help of tooltip and also you can add . Tooltips helps you to add more and more content. A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element 

 <div class="flex flex-col flex-wrap gap-2">
   <div class="flex flex-wrap items-center gap-2">
       <p>Here, is some content about tooltips that you can set the 
           <a href="javascript:void(0)" class="font-semibold text-secondary" tooltip="link"> tooltip </a>
          inside the content with help of tooltip and also you can add  
          <button class="font-semibold btn btn-xs bg-primaryLight text-title" tooltip="link"> Button <button>
          . Tooltips helps you to add more and more content. A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element
       </p>
   </div> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now