Tooltip
Текстовая подсказка с 12 положениями и автоматическим обходом границ экрана. Цвета, типографика, отступы и стрелка используют семантические токены.
Использование
Позиционирование
Доступность
Открывается по hover и фокусу, закрывается по Escape и blur. Триггер связан через aria-describedby; существующее описание сохраняется. Фокус остаётся на триггере. children должен принимать ref на DOM-элемент.
API
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
text* | ReactNode | — | Tooltip description; interactive content belongs in a Popover. |
children* | ReactElement<any, string | JSXElementConstructor<any>> | — | One focusable trigger that accepts a DOM ref. |
placement | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom" | top-center | Preferred placement; flips at viewport edges. |
open | boolean | — | Controlled visibility. |
defaultOpen | boolean | | Initial visibility in uncontrolled mode. |
onOpen | () => void | — | Called when the trigger requests opening. |
onClose | () => void | — | Called on Escape, blur or leaving the tooltip and its trigger. |
Last updated on