Lineone - Tooltip Element

Basic Tooltip

Code

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element. Check out code for detail of usage.

                
  <button
    x-tooltip="'Default'"
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
  >
    Default
  </button>
  <button
    x-tooltip.light="'Light'"
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
  >
    Light
  </button>
  <button
    x-tooltip.primary="'Primary'"
    class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
  >
    Primary
  </button>
  <button
    x-tooltip.secondary="'Secondary'"
    class="btn bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
  >
    Secondary
  </button>
  <button
    x-tooltip.info="'Info'"
    class="btn bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
  >
    Info
  </button>
  <button
    x-tooltip.success="'Success'"
    class="btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
  >
    Success
  </button>
  <button
    x-tooltip.warning="'Warning'"
    class="btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
  >
    Warning
  </button>
  <button
    x-tooltip.error="'Error'"
    class="btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
  >
    Error
  </button>

Tooltip Position

Code

Tooltip can be placed in four base ways in relation to the reference element. Check out code for detail of usage.

                
  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
    <button
      x-tooltip.placement.top.success="'Top'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Top
    </button>
    <button
      x-tooltip.placement.top-start.success="'Top Start'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Top Start
    </button>
    <button
      x-tooltip.placement.top-end.success="'Top End'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Top End
    </button>
    <button
      x-tooltip.placement.right.success="'Right'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Right
    </button>
    <button
      x-tooltip.placement.right-end.success="'Right End'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Right End
    </button>
    <button
      x-tooltip.placement.right-start.success="'Right Start'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Right Start
    </button>
    <button
      x-tooltip.placement.bottom.success="'Bottom'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Bottom
    </button>
    <button
      x-tooltip.placement.bottom-start.success="'Bottom Start'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Bottom Start
    </button>
    <button
      x-tooltip.placement.bottom-end.success="'Bottom End'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Bottom End
    </button>
    <button
      x-tooltip.placement.left.success="'Left'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Left
    </button>
    <button
      x-tooltip.placement.left-start.success="'Left Start'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Left Start
    </button>
    <button
      x-tooltip.placement.left-end.success="'Left End'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      Left End
    </button>
  </div>

Tooltip Delay, Duration

Code

Tooltip can delay hiding or showing after a trigger. Check out code for detail of usage.

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.delay.500="'Debounce 500 millisecond'"
  >
    Delay
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.duration.1000="'Duration 1 second animate tooltip'"
  >
    Duration
  </button>

Tooltip Trigger

Code

Tooltip can be triggered by a variety of different events, including click, focus, or any other even. Check out code for detail of usage.

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.on.mouseenter="'Hover me'"
  >
    Hover
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.on.click="'Click me'"
  >
    Click
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.on.focusin="'Focus me'"
  >
    Focus
  </button>

Follow Cursor

Code

Tooltip can follow the mouse cursor and abide by a certain axis. Additionally, the tooltip can follow the cursor until it shows, at which point it will stop following. Check out code for detail of usage.

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor="'Follow Cursor'"
  >
    Cursor
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor.x="'Follow Cursor horizontal'"
  >
    Horizontal
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor.y="'Follow Cursor Vertical'"
  >
    Vertical
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor.initial="'Follow Cursor initial'"
  >
    Initial
  </button>

HTML Content Tooltip

Code

Tooltip tippy can contain HTML. Check out code for detail of usage.

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.interactive.content="'#content1'"
  >
    Content
  </button>

  <template id="content1">
    <div class="flex space-x-3 rounded-lg bg-slate-150 p-3 dark:bg-navy-500">
      <div class="avatar">
        <img
          class="rounded-full"
          src="images/avatar/avatar-13.jpg"
          alt="image"
        />
      </div>
      <div>
        <p class="font-medium text-slate-700 dark:text-navy-100">John Doe</p>
        <p class="text-xs text-slate-500 dark:text-navy-200">Product Manager</p>
      </div>
    </div>
  </template>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Tooltip

Basic Tooltip

Tooltip Position

Tooltip Delay, Duration

Tooltip Trigger

Follow Cursor

HTML Content Tooltip