Tooltip

Positions

<Tooltip content="Edit this item" position="top">
  <button>Edit</button>
</Tooltip>

Interactive Demo

Select a position then hover the button to see the tooltip.

Icon Button with Tooltip

<Tooltip content="Edit" position="top">
  <IconButton icon={<EditIcon />} />
</Tooltip>

Props

Usage Guidelines

• Use tooltips for supplementary information, not essential content.
• Always provide tooltips on icon-only buttons for accessibility.
• Keep tooltip text short -- ideally under 5 words.
• Prefer top position unless space constraints require otherwise.