Tooltip

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

Import

1import { Tooltip } from '@payloadcms/ui'

Interactive usage

Loading component example…

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.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Tooltip

Import

Interactive usage

Common props

Upload