Tooltip

Default Tooltip

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

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

Focused Tooltip

You can set the focus tooltip.

  <div class="flex flex-col flex-wrap gap-2">
  <div class="flex items-center flex-wrap gap-2">
      <button data-tooltip-title="Focused" class="btn bg-primary-light hover:bg-primary hover:text-white focus:bg-primary focos:border-primary"> Focused </button>
  </div> 
</div>

Tooltip Position

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

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

Tooltip Outline

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

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

Filled Tooltip

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

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

Colored Tooltip

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

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

Inline Tooltip Content

You can set the content in tooltip.

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 items-center flex-wrap gap-2">
       <p>Here, is some content about tooltips that you can set the 
           <a href="javascript:void(0)" class="text-secondary font-semibold" data-tooltip-title="link"> tooltip </a>
          inside the content with help of tooltip and also you can add  
          <button class="btn btn-xs bg-primary-light font-semibold 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>

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Reset Buy Now