Tooltips
Four positions, optional arrow, HTML content, and trigger variations — built with hover/focus.
Positions
Top, right, bottom, left — all four sides
Hover any button to see the tooltip. Tooltips also appear on keyboard focus — try tabbing.
With Arrow
Small pointer toward the trigger
Rich Content
Tooltips can contain markup, not just text
Trigger Variations
Buttons, icon buttons, badges, text
Icon buttons
Text & badges
Learn moreRequiredSyncedBeta
Avatar & chips
AC
MP
JL
Toolbar Example
A real-world toolbar with tooltips on every action
Tip
Wrap any element in <Tooltip> to add a hover/focus hint.
Accessibility
Uses role="tooltip" and aria-describedby on focus.
Best practice
Keep tooltips under 50 chars. Don’t put essential info in a tooltip.