---
title: Tooltip
description: Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
keywords: ['tooltip', 'help', 'popup', 'information', 'hint']
source: https://github.com/primer/brand/blob/main/packages/react/src/Tooltip/Tooltip.tsx
storybook: '/brand/storybook/?path=/story/components-tooltip--playground'
ready: true
---

```js
import {Tooltip} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<Tooltip text="Sample tooltip content">
  <Button>Action</Button>
</Tooltip>
```

### Custom direction

By default, tooltips appear below the element. You can change the direction by passing the `direction` prop with a cardinal or diagonal direction.
Supported values are `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, and `nw`.

As long as there is enough room in the viewport, the tooltip will appear in the specified direction. If there is not enough room, the tooltip will appear in whatever direction it can place the tooltip without overflowing the viewport.

```jsx
<Tooltip text="Sample tooltip content" direction="e">
  <Button>Action</Button>
</Tooltip>
```

### Delay

Tooltips use a short pointer delay by default to avoid appearing while the pointer passes over a trigger. Use `medium` or `long` for groups of familiar controls where immediate tooltips would be distracting. Keyboard focus always opens the tooltip immediately.

```jsx
<Tooltip text="Sample tooltip content" delay="long">
  <Button>Long delay</Button>
</Tooltip>
```

### With an icon button

Use `IconButton` when a familiar Octicon can replace a visible text label. Its required `aria-label` provides the accessible name and automatically appears in a tooltip on hover and keyboard focus, so it does not need to be wrapped in `Tooltip`.

Use this with caution. It is generally better to use a visible label for better usability and accessibility.

```jsx
<IconButton icon={ScreenFullIcon} aria-label="Go fullscreen" />
```

For other custom icon-only controls, use `type="label"` to make the tooltip text the trigger's accessible name.

## Component props

| name        | type                       | default         | required | description                                                                                                                                                                              |
| ----------- | -------------------------- | --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `direction` | `TooltipDirections`        | `'s'`           | `false`  | The side the tooltip appears on                                                                                                                                                          |
| `delay`     | `TooltipDelays`            | `'short'`       | `false`  | Pointer hover delay: `short` (50ms), `medium` (400ms), or `long` (1200ms). Keyboard focus is immediate.                                                                                  |
| `text`      | `string`                   | `undefined`     | `true`   | The text to be displayed in the tooltip                                                                                                                                                  |
| `type`      | `'description' \| 'label'` | `'description'` | `false`  | The tooltip's semantic relationship to its trigger. `label` provides the accessible name, while `description` provides supplementary information alongside the trigger's existing label. |

## Related components

- Popover: For displaying more complex interactive content that appears when triggered
- [Button](../Button/index.md): Often used in conjunction with tooltips
- [Icon button](../IconButton/index.md): For familiar icon-only actions with automatic tooltips