Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Basic Tooltip
Simple tooltip with text content.
With Icons
Tooltips on icon buttons.
Different Positions
Tooltips positioned on different sides.
With Keyboard Shortcuts
Tooltips showing keyboard shortcuts.
Rich Content
Tooltips with multiple lines and formatting.
Action Tooltips
Tooltips on action buttons in a toolbar.
Disabled State
Tooltips on disabled elements.
On Text Elements
Tooltips on text and links.
This is a paragraph with a that needs explanation.
Check out our for more details.
Status Indicators
Tooltips on status badges.
In Card Actions
Tooltips in a card with multiple actions.
Project Alpha
A comprehensive design system for modern applications.