Tooltip
A short, instant description of a control or a data point.
<span id="orders-updated" tabindex="0">Updated 2 hours ago</span>
<mm-tooltip for="orders-updated">27 Oct 2026 04:12:09 UTC</mm-tooltip>
<mm-tooltip content="mrn://postgresql/table/shop.public.orders">
<a href="/assets/orders">orders</a>
</mm-tooltip>
Guidance
Tooltips are square-cornered and ink-filled, in caption type, and appear instantly with no
delay or animation. They hide on Escape, when the pointer leaves and when focus moves away.
Keep them to a short phrase that adds to the trigger's name; never put actions or essential
information in one. variant="data" is the chart tooltip: mono key and value pairs with
tabular numbers, driven by items.
Attach with for (the id of a trigger in the same document or shadow root; the tooltip's text
is its content and the trigger gets aria-describedby), or wrap a single trigger and give the
text in content (the trigger gets aria-description, since a description cannot reach into
a shadow root). Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
htmlFor | for | string | '' | The id of the trigger, in the same document or shadow root. The tooltip's content is its text. |
content | content | string | '' | Tooltip text when wrapping a trigger. |
placement | placement | Placement | 'top' | Placement against the trigger. |
variant | variant | 'default' | 'data' | 'default' | default (caption text) or data (mono key and value pairs from items). |
items | TooltipItem[] | [] | Key and value pairs for variant="data". | |
open | open | boolean | false | Whether the tooltip is showing. Set it to show a data tooltip under program control. |
trigger | HTMLElement | null | The element the tooltip describes. |
Methods
| Method | Description |
|---|---|
show() | Shows the tooltip against its trigger. |
showAt() | Shows the tooltip at a viewport point, for chart hover. |
Slots
| Slot | Description |
|---|---|
| Default | With for, the tooltip text. Otherwise, the trigger. |
content | Rich tooltip text when wrapping a trigger, instead of content. |
CSS parts
| Part | Description |
|---|---|
tooltip | The ink box. |
Examples
Every state of mm-tooltip in Storybook, with keyboard and screen reader tests.