v1.1.1

Tooltip

A popup that displays information related to an element when the element receives hover focus.

Default

Hover over the buttons to see tooltips.

html
Add to library
Add new item 
<div class="vt-tooltip-wrap">
  <button class="vt-btn vt-btn-bordered">
    Hover me
  </button>
  <div class="vt-tooltip">
    Add to library
    <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-4 vt-border-transparent vt-border-t-info-fill"></div>
  </div>
</div>
<div class="vt-tooltip-wrap">
  <button class="vt-btn vt-btn-bordered vt-btn-icon">

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-plus vt-w-4 vt-h-4">
      <path d="M5 12h14"></path><path d="M12 5v14"></path>
    </svg>
  </button>
  <div class="vt-tooltip">
    Add new item
    <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-4 vt-border-transparent vt-border-t-info-fill"></div>
  </div>
</div>

Positions

Tooltip placement on all four sides.

html
Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right 
<div class="vt-tooltip-wrap">
  <button class="vt-btn vt-btn-bordered">
    Top
  </button>
  <div class="vt-tooltip">
    Tooltip on top
    <div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-4 vt-border-transparent vt-border-t-info-fill"></div>
  </div>
</div>

<div class="vt-tooltip-wrap">
  <button class="vt-btn vt-btn-bordered">
    Bottom
  </button>
  <div class="vt-tooltip vt-tooltip-bottom">
    Tooltip on bottom
    <div class="vt-absolute vt-bottom-full vt-left-1/2 vt--translate-x-1/2 vt-border-4 vt-border-transparent vt-border-b-info-fill"></div>
  </div>
</div>

<div class="vt-tooltip-wrap">
  <button class="vt-btn vt-btn-bordered">
    Left
  </button>
  <div class="vt-tooltip vt-tooltip-left">
    Tooltip on left
    <div class="vt-absolute vt-left-full vt-top-1/2 vt--translate-y-1/2 vt-border-4 vt-border-transparent vt-border-l-info-fill"></div>
  </div>
</div>

<div class="vt-tooltip-wrap">
  <button class="vt-btn vt-btn-bordered">
    Right
  </button>
  <div class="vt-tooltip vt-tooltip-right">
    Tooltip on right
    <div class="vt-absolute vt-right-full vt-top-1/2 vt--translate-y-1/2 vt-border-4 vt-border-transparent vt-border-r-info-fill"></div>
  </div>
</div>

Toolbar with Tooltips

Icon buttons with tooltip labels.

html
Edit
Copy
Align
Settings
<div class="vt-inline-flex vt-items-center vt-gap-1 vt-p-1 vt-rounded-xl vt-border vt-border-border-default">
  <div class="vt-tooltip-wrap">
    <button class="vt-h-8 vt-w-8 vt-rounded-lg vt-flex vt-items-center vt-justify-center vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-pencil vt-w-4 vt-h-4">
        <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path>
      </svg>
    </button>
    <div class="vt-tooltip">Edit<div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-info-fill"></div></div>
  </div>
  <div class="vt-tooltip-wrap">
    <button class="vt-h-8 vt-w-8 vt-rounded-lg vt-flex vt-items-center vt-justify-center vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-copy vt-w-4 vt-h-4">
        <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
      </svg>
    </button>
    <div class="vt-tooltip">Copy<div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-info-fill"></div></div>
  </div>
  <div class="vt-w-[0.5px] vt-h-5 vt-bg-border-default vt-mx-0.5"></div>
  <div class="vt-tooltip-wrap">
    <button class="vt-h-8 vt-w-8 vt-rounded-lg vt-flex vt-items-center vt-justify-center vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-justify vt-w-4 vt-h-4">
        <path d="M3 5h18"></path><path d="M3 12h18"></path><path d="M3 19h18"></path>
      </svg>
    </button>
    <div class="vt-tooltip">Align<div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-info-fill"></div></div>
  </div>
  <div class="vt-tooltip-wrap">
    <button class="vt-h-8 vt-w-8 vt-rounded-lg vt-flex vt-items-center vt-justify-center vt-hover:bg-surface-subtle vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4">
        <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
      </svg>
    </button>
    <div class="vt-tooltip">Settings<div class="vt-absolute vt-top-full vt-left-1/2 vt--translate-x-1/2 vt-border-[3px] vt-border-transparent vt-border-t-info-fill"></div></div>
  </div>
</div>

Guidelines

Short text hint on hover for icon-only controls (wrap trigger in vt-tooltip-wrap). NOT for rich/interactive content → popover; never hide critical info in a tooltip.

Add item
Do
Label icon-only controls with a short tooltip hint (hover the button).
This permanently deletes your account and all of its data — this action cannot be undone.
Don't
Don't bury long or critical content inside a tooltip.

API Reference

All CSS classes available for the Tooltip component.

Class Type Description
vt-tooltip-wrap Base Wrapper for trigger and tooltip — adds position:relative and hover reveal
vt-tooltip Base Tooltip element — positioned above trigger by default, centered
vt-tooltip-bottom Position Bottom placement — centered below trigger
vt-tooltip-left Position Left placement — centered to the left
vt-tooltip-right Position Right placement — centered to the right
vt-bg-error-fill Variant Red tooltip for destructive action hints
vt-border-4 vt-border-transparent vt-border-t-info-fill Style CSS arrow triangle pointing toward trigger

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="tooltip" on the tooltip content element
Association Trigger element has aria-describedby pointing to tooltip id
Keyboard Tooltip shows on focus and hides on Escape
Hover Include delay before showing/hiding to prevent flickering
Content Keep tooltip text concise — for complex content use a popover instead