Examples
Basic usage
Saves the current document
Download a copy in your selected format
Make this visible to all subscribers
<div class="cluster" style="padding-block: var(--space-xl)">
<span class="tooltip-wrap">
<button class="button is-outlined" type="button" aria-describedby="tip-save">
Save
</button>
<span class="tooltip" id="tip-save" role="tooltip"
>Saves the current document</span
>
</span>
<span class="tooltip-wrap">
<button class="button is-outlined" type="button" aria-describedby="tip-export">
Export
</button>
<span class="tooltip" id="tip-export" role="tooltip"
>Download a copy in your selected format</span
>
</span>
<span class="tooltip-wrap">
<button class="button is-outlined" type="button" aria-describedby="tip-publish">
Publish
</button>
<span class="tooltip" id="tip-publish" role="tooltip"
>Make this visible to all subscribers</span
>
</span>
</div>
Position
Tooltip above the trigger (default)
Tooltip below the trigger
Tooltip to the inline-start side
Tooltip to the inline-end side
<div class="cluster" style="padding: var(--space-2xl) var(--space-xl)">
<span class="tooltip-wrap">
<button class="button is-outlined" type="button" aria-describedby="tip-pos-top">
Top
</button>
<span class="tooltip" id="tip-pos-top" role="tooltip"
>Tooltip above the trigger (default)</span
>
</span>
<span class="tooltip-wrap">
<button
class="button is-outlined"
type="button"
aria-describedby="tip-pos-bottom"
>
Bottom
</button>
<span class="tooltip is-bottom" id="tip-pos-bottom" role="tooltip"
>Tooltip below the trigger</span
>
</span>
<span class="tooltip-wrap">
<button
class="button is-outlined"
type="button"
aria-describedby="tip-pos-start"
>
Start
</button>
<span class="tooltip is-start" id="tip-pos-start" role="tooltip"
>Tooltip to the inline-start side</span
>
</span>
<span class="tooltip-wrap">
<button class="button is-outlined" type="button" aria-describedby="tip-pos-end">
End
</button>
<span class="tooltip is-end" id="tip-pos-end" role="tooltip"
>Tooltip to the inline-end side</span
>
</span>
</div>
Link trigger
<div class="cluster" style="padding-block: var(--space-xl)">
<span class="tooltip-wrap">
<a href="#" aria-describedby="tip-link-docs">Docs</a>
<span class="tooltip" id="tip-link-docs" role="tooltip"
>Component reference and patterns</span
>
</span>
<span class="tooltip-wrap">
<a href="#" aria-describedby="tip-link-status">Status</a>
<span class="tooltip" id="tip-link-status" role="tooltip"
>Live system status and incident history</span
>
</span>
</div>
Icon trigger (non-button)
<style>
.demo-info-icon {
display: inline-flex;
vertical-align: middle;
color: var(--color-text-muted);
}
</style>
<docs-resize>
<div class="cluster" style="padding-block: var(--space-xl)">
<label>
Username
<span class="tooltip-wrap">
<span
tabindex="0"
role="img"
aria-label="Help"
aria-describedby="tip-icon-rules"
class="demo-info-icon"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
</span>
<span class="tooltip" id="tip-icon-rules" role="tooltip"
>Letters, numbers, and underscores. 3-20 characters.</span
>
</span>
</label>
</div>
</docs-resize>
Status indicator
All systems operational
Partial outage in eu-west-1
Service unavailable
<style>
.demo-status-dot {
display: inline-block;
inline-size: 0.625rem;
block-size: 0.625rem;
border-radius: 50%;
vertical-align: middle;
}
.demo-status-dot.is-success {
background-color: var(--color-success);
}
.demo-status-dot.is-warning {
background-color: var(--color-warning);
}
.demo-status-dot.is-danger {
background-color: var(--color-danger);
}
</style>
<docs-resize>
<div class="cluster" style="padding-block: var(--space-xl)">
<span class="tooltip-wrap">
<span
tabindex="0"
role="img"
aria-label="Online"
aria-describedby="tip-status-online"
class="demo-status-dot is-success"
></span>
<span class="tooltip" id="tip-status-online" role="tooltip"
>All systems operational</span
>
</span>
<span class="tooltip-wrap">
<span
tabindex="0"
role="img"
aria-label="Degraded"
aria-describedby="tip-status-degraded"
class="demo-status-dot is-warning"
></span>
<span class="tooltip" id="tip-status-degraded" role="tooltip"
>Partial outage in eu-west-1</span
>
</span>
<span class="tooltip-wrap">
<span
tabindex="0"
role="img"
aria-label="Offline"
aria-describedby="tip-status-offline"
class="demo-status-dot is-danger"
></span>
<span class="tooltip" id="tip-status-offline" role="tooltip"
>Service unavailable</span
>
</span>
</div>
</docs-resize>
Truncated text
A very long file path that doesn't fit in the available container width
A very long file path that doesn't fit in the available container
width
<style>
.demo-truncated-row {
padding-block: var(--space-xl);
max-inline-size: 14rem;
}
.demo-truncated-row .tooltip-wrap {
display: block;
}
.demo-truncated {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<docs-resize>
<div class="demo-truncated-row">
<span class="tooltip-wrap">
<span tabindex="0" aria-describedby="tip-truncated" class="demo-truncated">
A very long file path that doesn't fit in the available container width
</span>
<span class="tooltip" id="tip-truncated" role="tooltip"
>A very long file path that doesn't fit in the available container
width</span
>
</span>
</div>
</docs-resize>
Multi-line tooltips
A longer explanation that wraps onto multiple lines because the content
exceeds the default max-width.
<div class="cluster" style="padding-block: var(--space-xl)">
<span class="tooltip-wrap">
<button class="button is-outlined" type="button" aria-describedby="tip-long">
What is this?
</button>
<span class="tooltip" id="tip-long" role="tooltip"
>A longer explanation that wraps onto multiple lines because the content
exceeds the default max-width.</span
>
</span>
</div>
Source comments
Tooltip -- supplementary annotation that appears on hover or
keyboard focus.
Markup:
<span class="tooltip-wrap">
<button aria-describedby="tip-help">Help</button>
<span class="tooltip" id="tip-help" role="tooltip">
Click to open the help center
</span>
</span>
The trigger's aria-describedby points at the tooltip's id.
Without that wiring, the tooltip is visible to sighted users
but mute to assistive tech -- the markup convention is
load-bearing.
Show / hide:
- Mouse hover on the wrap -- show after --tooltip-show-delay
(default 300ms); hide instantly on mouseleave.
- Keyboard focus on a child via :has(:focus-visible) -- show
after the same delay (so quick Tab-throughs don't flicker
tooltips on every focus stop).
Why CSS-only:
No JS dependency. The hover / focus mechanics are all native
selectors, the show delay is a transition-delay, the slide-
plus-fade is opacity + translate. Cross-browser via :has(),
which is widely available.
What this means for accessibility:
The tooltip element stays in normal DOM flow (not the top
layer). For tooltips on dense UI inside overflow:hidden
ancestors, content can clip -- consumer should give the
wrap or its ancestor `overflow: visible` if needed. For
typical tooltip usage on icon buttons or short labels the
default works.
Why an arrow:
Tooltips usually annotate small triggers (icon buttons in a
toolbar, links in a row of links). Without an arrow it's
ambiguous which sibling the tooltip belongs to. The arrow
resolves that ambiguity. Brio's other floating surfaces
(popover, dropdown) don't have arrows because they're larger
and the trigger-to-panel association is obvious from
proximity. Tooltip is small enough that the arrow earns its
place.
Reference
Source: src/css/tooltip.css
Applies to
.tooltip
Classes
| Class | Kind | Description |
|---|---|---|
.is-bottom | variant | Positions the tooltip below its trigger |
.is-start | variant | Positions the tooltip to the inline-start side of its trigger |
.is-end | variant | Positions the tooltip to the inline-end side of its trigger |
Tokens
| Token | Default | Description |
|---|---|---|
--tooltip-bg | var(--color-text) | Background color for the tooltip surface |
--tooltip-color | var(--color-text-inverse) | Text color inside the tooltip |
--tooltip-padding-inline | var(--ui-pad-inline-tight) | Inline-axis padding inside the tooltip |
--tooltip-padding-block | var(--ui-pad-block-compact) | Block-axis padding inside the tooltip |
--tooltip-radius | var(--radius-sm) | Corner radius for the tooltip |
--tooltip-font-size | var(--ui-font-size-xs) | Font size for tooltip text |
--tooltip-max-inline-size | 16rem | Maximum width before text wraps |
--tooltip-offset | 0.375rem | Gap between the tooltip and its trigger |
--tooltip-arrow-size | 5px | Size of the directional arrow |
--tooltip-show-delay | 300ms | Delay before the tooltip appears on hover or focus |
--tooltip-fade-duration | var(--duration-fast) | Duration of the fade and slide animation |
Related: Tooltip Wrap
An inline-block positioning context for trigger and tooltip pairs
Source: src/css/tooltip.css
Applies to
.tooltip-wrap