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 technical term that needs explanation.
Check out our documentation for more details.
Status Indicators
Tooltips on status badges.
Active
Warning
Error
In Card Actions
Tooltips in a card with multiple actions.
Project Alpha
A comprehensive design system for modern applications.