Tooltip

Tooltip — составной компонент для лёгких всплывающих описаний, привязанных к триггеру.

Обзор

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

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

Переменная	Значение	Влияет на
Поверхность тултипа.`TooltipContent`, `TooltipArrow`		В этом состоянии изменений не видно
Приподнятость всплывающего слоя.`TooltipContent`		В этом состоянии изменений не видно
Читаемый текст тултипа.`TooltipContent`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

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

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

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

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

Примеры

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

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

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