OVERLAY
Tooltip
Tooltips reveal a short label near their child without taking space in the page layout.
PLAYGROUND
A label for a compact action
Hover the action or move focus to it with the keyboard. The label stays out of the normal layout until it is needed.
Tooltip label:"Create a new project" position:"top" variant:"solid" scheme:"muted"
Button variant:"solid" scheme:"primary" iconStart:"add-circle"
"New project"POSITION
Place the label around its child
position selects the side of the child where the floating label appears. Use the side with the clearest available space.
Tooltip label:"Top tooltip" position:"top"
Button
"Top"
Tooltip label:"End tooltip" position:"end"
Button
"End"APPEARANCE
Two surfaces, semantic schemes
variant controls the tooltip surface. scheme chooses its design family independently from the child it describes.
Solid muted by default
Soft semantic context
TARGET BEHAVIOR
A pointer-first, portable contract
The same source keeps its child content on every target. Only targets with hover or keyboard focus present the floating label.
WEB
Hover and focus label
Dowe positions the label beside the child when it is hovered or receives keyboard focus.
DESKTOP
Same focused affordance
Desktop reuses the web presentation so compact controls remain understandable with a pointer or keyboard.
ANDROID AND IOS
Child content only
Touch targets render the child without a persistent tooltip because they do not expose hover.
API
Props
Tooltip accepts one or more normal view children and the applicable common spacing, sizing, visibility, and accessibility props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||