# Tooltip: Стилизация

## Обзор

Стили `Tooltip` определяются семантикой всплывающей поверхности и небольшой стрелкой. Компонент должен оставаться визуально легче `Popover` и заметно легче модальных оверлеев.

## Публичные CSS-переменные

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--surface-secondary` | `TooltipContent`, `TooltipArrow` | Поверхность тултипа. |
| `--surface-shadow` | `TooltipContent` | Приподнятость всплывающего слоя. |
| `--text-color` | `TooltipContent` | Читаемый текст тултипа. |

## Переменные частей

- `TooltipContent` использует семантику всплывающей поверхности.
- `TooltipArrow` использует тот же цвет поверхности, что и содержимое.

## Взаимодействие состояний и вариантов

- Бо́льшая часть различий определяется расположением и длиной содержимого, а не большим API переменных.
- Стили должны отличать тултип от поповеров, нагруженных действиями.

## Примеры

```css
.brand-theme {
  --surface-secondary: oklch(24% 0.005 285);
  --text-color: oklch(100% 0 0);
}
```

## Не переопределяйте

- Не превращайте стили тултипа в псевдо-поповер с содержимым, нагруженным задачами.
- Не упрощайте цвет и тень настолько, что тултип теряет характер всплывающей подсказки.