Tooltip
Maintainer:
amje
placement
Tooltip (тултип) — это простая текстовая подсказка, использующая в качестве якоря дочерний элемент. Этот компонент поддерживает только текстовое содержимое и может быть отличной альтернативой заголовку в браузере благодаря своему небольшому размеру и увеличенной задержке появления.
Может иметь светлую или темную тему.
Использование
import {Tooltip} from '@gravity-ui/uikit';
<Tooltip content="Content">
<div tabIndex={0}>Anchor</div>
</Tooltip>;
Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| children | Элемент-якорь для Tooltip. Должен принимать ref для передачи DOM-элемента. | React.ReactElement | |
| closeDelay | Время задержки в миллисекундах перед скрытием Tooltip после увода курсора с элемента. | number | 0 |
| openDelay | Время задержки в миллисекундах перед показом Tooltip после наведения курсора на элемент. | number | 1000 |
| placement | Положение Tooltip относительно якоря. | PopupPlacement | |
| qa | HTML-атрибут data-qa, используется для тестирования. | string | |
| content | Содержимое, которое будет отображено в Tooltip. | React.ReactNode | |
| id | Используется для реализации логики доступности. | string | |
| disablePortal | Отключает использование Portal для дочерних элементов. | boolean | |
| contentClassName | HTML-атрибут class для узла с содержимым. | string | |
| className | HTML-атрибут class для всплывающего окна. | string | |
| disabled | Блокирует открытие всплывающего окна. | boolean | false |