# Tooltip

Source: https://payloadcms.com/docs/ui-components/tooltip

The `Tooltip` component displays a short label or explanation near a control. Its nearest positioned ancestor determines where the tooltip is anchored.

## Import

```tsx
import { Tooltip } from '@payloadcms/ui'
```

## Interactive usage

**Implementation**

```tsx
const [show, setShow] = useState(false)

<div style={{ position: 'relative' }}>
  <Button
    buttonStyle="secondary"
    extraButtonProps={{
      onBlur: () => setShow(false),
      onFocus: () => setShow(true),
      onMouseEnter: () => setShow(true),
      onMouseLeave: () => setShow(false),
    }}
    margin={false}
  >
    Hover or focus
  </Button>
  <Tooltip delay={0} position="top" show={show} staticPositioning>
    Helpful context
  </Tooltip>
</div>
```

**Styling**

Style regular Tooltips and their caret together while excluding field-error Tooltips from the override.

```css
.tooltip:not(.field-error) {
  --caret-size: 8px;
  background: #211b4d;
  color: #ffffff;
  border-radius: 6px;
  padding: 0.375rem 0.625rem;
}

.tooltip--position-top:not(.field-error)::after {
  border-top-color: #211b4d;
}
```

- `--caret-size`: Tooltip caret dimensions.
- `background`: Tooltip surface.
- `color`: Tooltip text.
- `padding`: Space around Tooltip content.

Keep tooltip content brief. Important instructions should remain visible on the page rather than appearing only on hover or focus.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop                | Type                            | Default    | Description                                              |
| ------------------- | ------------------------------- | ---------- | -------------------------------------------------------- |
| `children` \*       | `ReactNode`                     | —          | Content displayed inside the tooltip.                    |
| `show`              | `boolean`                       | `true`     | Controls tooltip visibility.                             |
| `position`          | `'top' \| 'bottom'`             | Automatic  | Sets the preferred position.                             |
| `alignCaret`        | `'left' \| 'center' \| 'right'` | `'center'` | Aligns the tooltip caret.                                |
| `delay`             | `number`                        | `350`      | Delay before showing the tooltip, in milliseconds.       |
| `staticPositioning` | `boolean`                       | `false`    | Disables automatic position detection.                   |
| `boundingRef`       | `RefObject<HTMLElement>`        | —          | Sets the boundary used for automatic position detection. |
| `className`         | `string`                        | —          | Adds a custom class to the tooltip.                      |

_\* An asterisk denotes that a prop is required._