# Core/Tooltip - Design

A component to display additional information when hovering or focusing on an interactive element.

## Properties

### Title

The text shown in the tooltip.

### Shortcut

The keyboard shortcut shown in the tooltip.

## Behavior

### Presentation

Tooltips appear after a 500ms delay when hovering a trigger element. Focusing a trigger element will show the
tooltip immediately.

### Dismissing

Tooltips disappear 500ms after the trigger element loses hover, immediately if focus is lost, or when another
element receives hover or focus that reveals a tooltip.

### Overflow

Tooltip titles should avoid wrapping where possible. When required, the title wraps to a new line when extending
beyond the width of the container.

### Placement

By default, tooltips appear below the trigger element. The tooltip will shift position if its placement places it
outside the viewport.

## Best Practices

**Do**

<p>
  Do show only a single tooltip at a time.
</p>

**Don't**

<img style={{ width: '256px', marginInline: 'auto', display: 'block' }} src="tooltip-bestpractices-multiple-dont.png" />

<p>
  Don't override tooltip behavior to show multiple at once.
</p>

## Accessibility

### Interaction

Tooltips are triggered on hover or focus, never on click. Tooltips do not contain interactive content.

### Custom Trigger

See the Usage page for more information on custom triggers.