# 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 flex-row items-center justify-center 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 flex-row items-center justify-center 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 flex-row items-center justify-center 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 flex-row items-center justify-center 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts