Mushilu-San UI Tooltip
A short hint that appears when the user hovers or focuses an element.
Selector: [muiTooltip]
import { Tooltip } from '@mushilu-san/ui/data-display';Loading example…
Overview
muiTooltip to any element to show its text on hover and on keyboard focus. placement sets the side. The tooltip has role="tooltip", and the trigger points to it with aria-describedby while it is visible.
When to use
Explaining an icon-only button, such as "Copy link". A short clarification of a label or value.
When not to use
Essential information. Users on touch devices may never see it. Interactive content such as links or forms. Use a popover. Use Popover instead.
Guidelines
Do
Keep the text to a few words. Give the trigger a visible label or an aria-label as well.
Don't
Do not put a button or link inside a tooltip. Do not hide the only explanation of a control in a tooltip.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
tooltip | tooltip | aria-describedby while visible. |
Keyboard
| Keys | Action |
|---|---|
| Focus | |
| Escape |
Icon-only triggers still need aria-label. The tooltip adds a description, not a name.
API
Tooltip
| Name | Type | Default | Description |
|---|---|---|---|
muiTooltip | string | — | Tooltip text content. Bound directly via the attribute selector. |
placement | Placement | 'top' | Preferred placement relative to the host element. |
Tokens
--mui-color-text--mui-color-surface-raised--mui-shadow-3--mui-radius-sm--mui-font-size-xs