Tooltip

Default Tooltip

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 flex-wrap items-center gap-2">
      <button class="text-white btn btn-primary" data-tw-tooltip="Surprise!!! I appreciate your hovering...">Please hover over me, it's magic... </button>
  </div> 
</div>

Focused Tooltip

Set the focus tooltip.

 <div class="flex flex-col flex-wrap gap-2">
  <div class="flex flex-wrap items-center gap-2">
      <button data-tw-tooltip="Focused" class="btn bg-warning-light hover:bg-warning  dark:bg-sidebar-dark2 dark:hover:bg-warning dark:focus:bg-warning hover:text-white focus:bg-warning focus:border-warning focus:text-white >Focused</button>
  </div> 
</div>

Tooltip Position

Set the position of tooltips with the help of top / left / right / bottom

<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" data-tw-tooltip="Top tooltip" data-flow="top">Top Position</button>
      <button class="text-white btn btn-secondary" data-tw-tooltip="Left tooltip" data-flow="left">Left Position</button>
      <button class="text-white btn btn-info" data-tw-tooltip="Right tooltip" data-flow="right">Right Position</button>
      <button class="text-white btn btn-warning" data-tw-tooltip="Bottom tooltip" data-flow="bottom">Bottom Position</button>
  </div> 
</div>;

Tooltip Outline

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 flex-wrap items-center gap-2">
      <button class="btn btn-outline btn-secondary" data-tw-tooltip="Top tooltip" data-flow="top" class="dark:bg-sidebar-dark2">Top Tooltip</button>
      <button class="btn btn-outline btn-warning" data-tw-tooltip="Left tooltip" data-flow="left" class="dark:bg-sidebar-dark2">Left Tooltip</button>
      <button class="btn btn-outline btn-info" data-tw-tooltip="Right tooltip" data-flow="right" class="dark:bg-sidebar-dark2">Right Tooltip</button>
      <button class="btn btn-outline btn-success" data-tw-tooltip="Bottom tooltip" data-flow="bottom" class="dark:bg-sidebar-dark2">Bottom Tooltip</button>
  </div> 
</div>;

Filled Tooltip

Set the position of tooltips with the halp of up / left / right / bottom with focus.

<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 dark:bg-sidebar-dark2 " data-tw-tooltip="Top tooltip" data-flow="top">Top Tooltip</button>
      <button class="btn btn-outline btn-primary dark:bg-sidebar-dark2 " data-tw-tooltip="Left tooltip" data-flow="left">Left Tooltip</button>
      <button class="btn btn-outline btn-primary dark:bg-sidebar-dark2 " data-tw-tooltip="Right tooltip" data-flow="right">Right Tooltip</button>
      <button class="btn btn-outline btn-primary dark:bg-sidebar-dark2 " data-tw-tooltip="Bottom tooltip" data-flow="bottom">Bottom Tooltip</button>
  </div> 
</div>;

Colored Tooltip

Using .btn- *class set the colored tooltips.

<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" data-tw-tooltip="Primary">Primary</button>
      <button class="text-white btn btn-secondary" data-tw-tooltip="Secondary">Secondary</button>
      <button class="text-white btn btn-info" data-tw-tooltip="Info">Info</button>
      <button class="text-white btn btn-success" data-tw-tooltip="Success">Success</button>
      <button class="text-white btn btn-warning" data-tw-tooltip="Warning">Warning</button>
      <button class="text-white btn btn-danger" data-tw-tooltip="Danger">Danger</button>
      <button class="btn btn-light text-title" data-tw-tooltip="Light">Light</button>
  </div> 
</div>;

Inline Tooltip Content

Set tooltip inside the content.

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" data-tw-tooltip="link"> tooltip </a>
          inside the content with help of tooltip and also you can add  
          <button class="font-semibold btn btn-xs bg-primary-light text-title" data-tw-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 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode