Tooltip

Maintainer:
amje
GitHub
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 после увода курсора с элемента.number0
openDelayВремя задержки в миллисекундах перед показом Tooltip после наведения курсора на элемент.number1000
placementПоложение Tooltip относительно якоря.PopupPlacement
qaHTML-атрибут data-qa, используется для тестирования.string
contentСодержимое, которое будет отображено в Tooltip.React.ReactNode
idИспользуется для реализации логики доступности.string
disablePortalОтключает использование Portal для дочерних элементов.boolean
contentClassNameHTML-атрибут class для узла с содержимым.string
classNameHTML-атрибут class для всплывающего окна.string
disabledБлокирует открытие всплывающего окна.booleanfalse