# Tooltip



`Tooltip` (тултип) — это простая текстовая подсказка, использующая в качестве якоря дочерний элемент. Этот компонент поддерживает только текстовое содержимое и может быть отличной альтернативой заголовку в браузере благодаря своему небольшому размеру и увеличенной задержке появления.

Может иметь светлую или темную тему.

## Использование

```tsx
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`](../Popup/README.md#placement) |                       |
| 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`        |