Tooltips
Four sides, rich content, and trigger variations — built on the Portal-based Tooltip component (z-70, hover + focus activation).
Positions
Top, right, bottom, left — all four sides
Hover any button to see the tooltip. Tooltips also appear on keyboard focus — try tabbing.
Pill Style
Dark pill tooltip that floats above content
Rich Content
Tooltips can contain markup, not just text
Trigger Variations
Buttons, icon buttons, badges, text
Icon buttons
Text & badges
Learn more
Required
Synced
Beta
Avatars
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
Appears on hover and keyboard focus. Tab through triggers to verify.
Best practice
Keep tooltips under 50 chars. Don’t put essential info in a tooltip.