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>Hover me</button>
<div class="vt-tooltip">
Tooltip text
</div>
</div>Positions
Tooltip placement on all four sides.
html
Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right
<!-- Top -->
<div class="vt-tooltip-wrap">
<button>Top</button>
<div class="vt-tooltip">
Tooltip on top
</div>
</div>
<!-- Bottom -->
<div class="vt-tooltip-wrap">
<button>Bottom</button>
<div class="vt-tooltip vt-tooltip-bottom">Tooltip on bottom</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">
<svg class="vt-w-4 vt-h-4">...</svg>
</button>
<div class="vt-tooltip">Edit</div>
</div>
</div>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-primary |
Variant | Red tooltip for destructive action hints |
vt-border-4 vt-border-transparent vt-border-t-info-primary |
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 |