UIKit
7.11.0
• TooltipКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
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 |