Сочетание клавиш
Show Shortcut · Show Pointer
Ширина
Fit content · предел 200
Позиция стрелки
first · center · last
--ds-tooltip-bg
var(--ds-nb-900) · тёмный фон подсказки
--ds-tooltip-text
var(--ds-nb-0) · белый текст
--ds-tooltip-r
var(--ds-radius-sm) · скругление углов
--ds-tooltip-px
8px · горизонтальный паддинг
--ds-tooltip-py
4px · вертикальный паддинг
--ds-tooltip-max-w
200px · максимальная ширина
--ds-tooltip-offset
6px · отступ от триггера
--ds-tooltip-arrow
6px · размер стрелки
--ds-tooltip-dur
var(--ds-dur-2) · длительность анимации появления
Тёмная тема
Инверсия: светлый tooltip на тёмном фоне
Правила применения
UX · Доступность
Применение
Когда использовать
- Icon Only кнопки — пояснение действия без текстового лейбла
- Поля с ограниченным контекстом — дополнительная справка к полю ввода
- Сокращения и термины — расшифровка аббревиатур при наведении
- Краткие подсказки — до 200px ширины, одна мысль
Ограничения
Чего избегать
- Не использовать для интерактивного контента (ссылки, кнопки внутри)
- Не заменять Popover при необходимости Rich-контента
- Не дублировать видимый лейбл — tooltip должен добавлять информацию
- Не использовать для критичных инструкций — tooltip скрыт по умолчанию
Доступность
ARIA для Tooltip
role="tooltip" на контейнере подсказкиaria-describedby на триггере — ссылка на id tooltip- Доступен с клавиатуры: появляется при фокусе, закрывается по Escape
- Не скрывать через
display:none во время анимации — использовать opacity
Анатомия
Структура компонента
- Root —
.ds-tooltip-root position:relative обёртка
- Content —
.ds-tooltip сам tooltip, абсолютное позиционирование
- Arrow —
.ds-tooltip-arrow CSS border-трюк стрелки
- Направление задаётся через
data-placement: top / right / bottom / left
State Explorer
Интерактивный тест состояний