mirror of
https://github.com/payloadcms/payload.git
synced 2026-09-14 20:07:19 +08:00
Sean Zubrickas
4884195d71
Adds the first release of @payloadcms/ui component documentation, focused on common, visually useful components and working Payload v3 examples. - Adds component guides, usage guidance, props, and accessibility notes. - Adds an overview and curated component inventory under Features → UI Components. *_v4 as a fast follow once this gets approved_
39 lines
2.1 KiB
Plaintext
39 lines
2.1 KiB
Plaintext
---
|
|
title: Tooltip
|
|
label: Tooltip
|
|
order: 280
|
|
desc: Display brief contextual help with Payload's Tooltip component.
|
|
keywords: ui, component, tooltip, help, label
|
|
---
|
|
|
|
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
|
|
|
|
<ComponentPreview component="Tooltip" example="interactive" />
|
|
|
|
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._
|