Tooltip
Подсказка при наведении и фокусе.
Оберните в Tooltip один элемент-триггер — он должен принимать ref и обработчики событий (Button, ссылка, SVG-элемент). Подсказка появляется при наведении с задержкой delay и сразу при фокусе с клавиатуры. placement задаёт сторону (top по умолчанию), при нехватке места подсказка переворачивается. arrow показывает стрелку. maxWidth ограничивает ширину подсказки (320px по умолчанию, число — пиксели, строка — любое CSS-значение). Внутри <svg> или контейнера с overflow: hidden включите portal. Подсказка не заменяет доступное имя: у кнопки только с иконкой оставьте aria-label.
Живой пример
Настройки примера
Использование
import { ArrowUpIcon } from '@heroicons/react/24/outline';
import { Button, Tooltip } from '@prosazhin/pbcomponents';
<Tooltip
content='Back to top'
placement='left'
>
<Button
theme='ghost'
leftIcon={ArrowUpIcon}
aria-label='Back to top'
/>
</Tooltip>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | ReactElement | Элемент-триггер; должен принимать ref и обработчики событий. | — |
content | ReactNode | Текст подсказки. | — |
placement | PopoverPlacementtop · top-start · top-end · bottom · bottom-start · bottom-end · left · left-start · left-end · right · right-start · right-end | Сторона и выравнивание относительно триггера: top, bottom-start, right-end и т. д. При нехватке места попап переворачивается и сдвигается. | top |
arrow | boolean | Стрелка, указывающая на триггер. | true |
open | boolean | Управляемое состояние открытия. | — |
defaultOpen | boolean | Начальное состояние без внешнего управления. | false |
onOpenChange | (open: boolean) => void | Вызывается при открытии и закрытии. | — |
delay | number | Задержка показа при наведении в миллисекундах. | 200 |
disabled | boolean | Отключает подсказку. | false |
portal | boolean | Рендерит подсказку в портал — нужно, например, внутри SVG или overflow: hidden. | false |
maxWidth | number | string | Максимальная ширина подсказки: число — в пикселях, строка — любое CSS-значение. Не больше ширины экрана. | 320 |
className | string | Класс корневого элемента. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.