Tooltip
Small informational popup for additional context. Position via JS.
Positions
Top
Bottom
Start
End
Base
| Class | Description |
|---|---|
.ui-tooltip | Base class |
Position
| Class | Value |
|---|---|
.ui-tooltip--top | top |
.ui-tooltip--bottom | bottom |
.ui-tooltip--start | start |
.ui-tooltip--end | end |
Visible
| Class | Description |
|---|---|
.ui-tooltip--visible | visible |
Animate
| Class | Description |
|---|---|
.ui-tooltip--animate | animate |
Anchored
| Class | Description |
|---|---|
.ui-tooltip--anchored | anchored |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-tooltip-bg |
var(--ui-color-text) |
Background color |
--ui-tooltip-color |
var(--ui-color-bg) |
Text color |
--ui-tooltip-radius |
var(--ui-radius-sm) |
Corner radius |
--ui-tooltip-padding-x |
calc(var(--ui-unit) * 1) |
Horizontal padding |
--ui-tooltip-padding-y |
calc(var(--ui-unit) / 2) |
Vertical padding |
--ui-tooltip-font-size |
var(--ui-font-size-sm) |
Font size |
--ui-tooltip-z |
var(--ui-z-index-tooltip) |
Z-index stacking order |
--ui-tooltip-arrow-size |
calc(var(--ui-unit) / 2) |
Arrow size |
With Animation
Animated tooltip
<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible ui-relative">Animated tooltip</span>Anchor Positioned
Anchored tooltip
<!-- Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers. -->
<div style="position: relative; padding: var(--ui-space-4); display: flex; gap: var(--ui-space-4);">
<button class="ui-button" style="anchor-name: --tooltip;">Hover me</button>
<span class="ui-tooltip ui-tooltip--anchored ui-tooltip--visible">Anchored tooltip</span>
</div>