Pure CSS tooltips — no JavaScript required. Apply wf-tooltip and a data-tip attribute to any element. Tooltips appear on :hover and :focus / :focus-within .
Add wf-tooltip and data-tip to any inline element. Hover for a preview.
<!-- On a span -->
<span class="wf-tooltip" data-tip="This is a tooltip">Hover me</span>
<!-- Directly on a button -->
<button class="wf-btn wf-tooltip" data-tip="Save the current document">Save</button>
<!-- Wrapping a button (uses :focus-within) -->
<span class="wf-tooltip" data-tip="Keyboard shortcut: Ctrl + Z">
<button class="wf-btn">Undo</button>
</span>Four placement options. Default (no modifier) is top.
<button class="wf-tooltip" data-tip="Appears above (default)">Top</button>
<button class="wf-tooltip wf-tooltip-bottom" data-tip="Appears below">Bottom</button>
<button class="wf-tooltip wf-tooltip-left" data-tip="Appears to the left">Left</button>
<button class="wf-tooltip wf-tooltip-right" data-tip="Appears to the right">Right</button>Three sizes. Size affects font size, padding, and arrow.
<button class="wf-tooltip wf-tooltip-sm" data-tip="Small tooltip">Small</button>
<button class="wf-tooltip" data-tip="Default tooltip">Default</button>
<button class="wf-tooltip wf-tooltip-lg" data-tip="Large tooltip">Large</button>Five color themes including a light variant that adapts to the current surface color.
<button class="wf-tooltip" data-tip="Default dark tooltip">Default</button>
<button class="wf-tooltip wf-tooltip-light" data-tip="Light surface tooltip">Light</button>
<button class="wf-tooltip wf-tooltip-primary" data-tip="Primary themed tooltip">Primary</button>
<button class="wf-tooltip wf-tooltip-success" data-tip="Success themed tooltip">Success</button>
<button class="wf-tooltip wf-tooltip-danger" data-tip="Danger themed tooltip">Danger</button>
<button class="wf-tooltip wf-tooltip-warning" data-tip="Warning themed tooltip">Warning</button>Remove the arrow or widen the bubble for a longer content.
<button class="wf-tooltip wf-tooltip-no-arrow"
data-tip="No directional arrow">No Arrow
</button><button class="wf-tooltip wf-tooltip-wide"
data-tip="A longer description that wraps nicely at 22 rem.">Wide Tooltip
</button>Add wf-tooltip-disabled to suppress the tooltip without removing data-tip . Toggle the class with JavaScript to re-enable it later.
<button class="wf-tooltip" data-tip="Tooltip text">Active</button>
<!-- Tooltip suppressed — toggle class to re-enable -->
<button class="wf-tooltip wf-tooltip-disabled" data-tip="Tooltip text">Disabled</button>| Property | Default | Description |
|---|---|---|
| --_tt-bg | #1d2433 | Tooltip background color. |
| --_tt-fg | #fff | Tooltip text color. |
| --_tt-border-color | transparent | Border color. Visible on wf-tooltip-light . |
| --_tt-radius | var(--wf-radius-3) | Border radius of the bubble. |
| --_tt-pad-v / --_tt-pad-h | .375rem / .625rem | Vertical and horizontal padding inside the bubble. |
| --_tt-font-size | .8125rem | Font size of the tooltip text. |
| --_tt-max-width | 14rem | Maximum bubble width before text wraps. |
| --_tt-arrow-size | 5px | Arrow size in pixels. |
| --_tt-gap | .4rem | Space between the trigger element and the tooltip bubble. |
| --_tt-duration | .18s | Fade and slide transition duration. |
| --_tt-slide | 5px | Distance the tooltip slides during the enter/exit animation. |
| --_tt-z | 9000 | z-index of the tooltip. |
All modifier classes available on .wf-tooltip
| Class | Type | Description |
|---|---|---|
| wf-tooltip | Base | Required. Apply to the trigger element along with a data-tip="…" attribute. Positions the tooltip above by default. |
| wf-tooltip-top / -bottom / -left / -right | Position | Controls which side the tooltip appears on. Default (no modifier) is top. wf-tooltip-top is an alias for the default behavior. |
| wf-tooltip-sm / -lg | Size | Smaller or larger font size, padding, and arrow. |
| wf-tooltip-wide | Width | Increases max-width from 14rem to 22rem. Useful for longer descriptions. |
| wf-tooltip-light / -primary / -success / -danger / -warning | Theme | Overrides background and text color. wf-tooltip-light uses the surface color with a border. |
| wf-tooltip-no-arrow | Modifier | Hides the directional arrow. |
| wf-tooltip-disabled | State | Prevents the tooltip from appearing. Toggle this class to temporarily suppress the tooltip. |