Tooltip

Tooltip — составной компонент для лёгких всплывающих описаний, привязанных к триггеру.

Пропсы корня

Проп	Тип	По умолчанию
`delayOpen`	`number`	`500`
Задержка (в миллисекундах) перед появлением подсказки при наведении. При фокусе с клавиатуры и сразу после закрытия другой подсказки она появляется мгновенно.
`delayClose`	`number`	`0`
Задержка (в миллисекундах) перед скрытием подсказки после потери фокуса или ухода указателя.
`open`	`boolean`	—
Управляет состоянием открытия подсказки. Если задан, компонент становится контролируемым.
`defaultOpen`	`boolean`	`false`
Начальное состояние открытия для неконтролируемого использования.
`onChangeOpen`	`(state: boolean) => void`	—
Колбэк, вызываемый при изменении состояния открытия.

Также принимает все атрибуты <div>.

Дочерние части

`TooltipTrigger`

Элемент, который описывает тултип. Показывает тултип при наведении мышью или пером и при фокусе с клавиатуры (:focus-visible), но никогда по касанию, и скрывает его при нажатии на триггер, уходе указателя, потере фокуса и по Escape. Пока тултип открыт, триггер указывает на него через aria-describedby.

Проп	Тип	По умолчанию
`asChild`	`boolean`	—
Если true, рендерит триггер как дочерний элемент в слоте через `asChild`. Позволяет использовать собственные элементы (например, `<a>`, `<div>`, кнопки-иконки) в качестве триггеров подсказки.
`ref`	`Ref<HTMLButtonElement>`	—
Ref, передаваемый на нижележащую кнопку или элемент в слоте. Полезен для управления фокусом, программного доступа или улучшения доступности.

Также принимает все атрибуты <button>.

`TooltipContent`

Поверхность с role="tooltip". Если браузер поддерживает, рендерится в верхнем слое (top layer) с popover="manual", поэтому модальный диалог или контейнер с overflow не обрезает и не перекрывает её. Пропускает указатель к странице (pointer-events: none) и вырастает из своей стрелки.

Проп	Тип	По умолчанию
`ref`	`Ref<HTMLDivElement>`	—
Ref, передаваемый на элемент содержимого подсказки. Полезен для позиционирования, измерений или управления фокусом.

Также принимает все атрибуты <div>.

`TooltipArrow`

Необязательная стрелка, указывающая на триггер.

Также принимает ref и все атрибуты <svg>.

Типы

TooltipProps
TooltipTriggerProps
TooltipContentProps
TooltipArrowProps

Модель состояния

Состояние открытия может быть контролируемым через open и onChangeOpen или неконтролируемым через defaultOpen.
Триггер и содержимое координирует корень.
delayOpen действует только при наведении. При фокусе с клавиатуры и сразу после закрытия другого тултипа тултип показывается без задержки.
useTooltipContext доступен для продвинутых обёрток и хелперов тайминга. Пропсы floating-ui он больше не предоставляет.
Тайминг тултипа должен служить дополнительной информации, а не критичным для продукта инструкциям.