Tooltip

Displays contextual information when hovering over an element. Tooltips are for informational text only and should not contain interactive content.

Props

Prop	Type	Required	Default	Description
content	string	Yes	-	Text to display in the tooltip
children	ReactNode	Yes	-	Element that triggers the tooltip on hover
tag	keyof HTMLElementTagNameMap	No	-	HTML tag for the wrapper element
jss	JSS	No	-	Custom styles for the wrapper

Basic usage

Wrap any element with Tooltip to show contextual information on hover:

<Tooltip content="This confirms the action">
  <Button bare color="primary" onClick={() => {}}>
    Hover me
  </Button>
</Tooltip>

With IconButton

Tooltips are especially useful with icon-only buttons to explain their purpose:

<Tooltip content="Save document">
  <IconButton bare icon="save" color="secondary" onClick={() => {}} />
</Tooltip>

Behavior

Shows on hover: Tooltip appears when mouse enters the wrapped element
Hides on leave: Tooltip disappears when mouse leaves
Keyboard dismissal: Pressing Escape or Tab closes the tooltip
Click dismissal: Clicking anywhere closes the tooltip

Accessibility considerations

Tooltips should contain only supplementary information:

Do: Use for hints, descriptions, or labels
Don't: Put interactive elements (buttons, links) inside tooltips
Don't: Put essential information only in tooltips

For interactive floating content, use Popover instead.

// Good - informational tooltip
<Tooltip content="Keyboard shortcut: Ctrl+S">
  <Button color="secondary" onClick={save}>Save</Button>
</Tooltip>

// Bad - essential information hidden
<Tooltip content="Click here to delete your account permanently">
  <Button color="negative" onClick={delete}>Delete</Button>
</Tooltip>