Tooltips

Tooltips are small, contextual pop-up windows that provide additional information or explanatory text when a user hovers over or clicks on an element, such as a button, icon, or hyperlink, in a graphical user interface (GUI)

            
<!-- Left tooltip -->
<button class="btn relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
  <span aria-label="Left Tooltip" data-microtip-position="left" role="tooltip">Left Tooltip</span>
</button>
<!-- Top tooltip -->
<button class="btn relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
  <span aria-label="Top Tooltip" data-microtip-position="top" role="tooltip">Top Tooltip</span>
</button>
<!-- Bottom tooltip -->
<button class="btn relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
  <span aria-label="Bottom Tooltip" data-microtip-position="bottom" role="tooltip">Bottom Tooltip</span>
</button>
<!-- Right tooltip -->
<button class="btn relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
  <span aria-label="Right Tooltip" data-microtip-position="right" role="tooltip">Right Tooltip</span>
</button>