НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Подсказка

Подсказка — короткий текст в пузыре, который появляется при наведении на контрол или при фокусе на нём. В ней никогда нет того, без чего не обойтись.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Delete 
<tk-tooltip text="Also removes the file from shared folders">
  <tk-button tone="danger">Delete</tk-button>
</tk-tooltip>

Анатомия

Часть Что это
tk-tooltip обёртка
слот по умолчанию один контрол, который получает фокус: триггер
пузырь текст в верхнем слое, в 4px от триггера; без стрелки

Типы

Share 
<tk-tooltip type="label">
  <tk-icon-button label="Copy link"><tk-icon name="copy"></tk-icon></tk-icon-button>
</tk-tooltip>
<tk-tooltip text="Shared with 3 people">
  <tk-button>Share</tk-button>
</tk-tooltip>

Выглядят оба одинаково; разница в том, что слышит скринридер.

  • label: текст и есть имя контрола. Только для контролов с одной иконкой. С tk-icon-button не задавайте text: подсказка покажет label кнопки, и они всегда совпадут.
  • description (по умолчанию): текст дополняет имя контрола. Не повторяйте видимую подпись.

Положение

Pin Archive 
<tk-tooltip text="Moves the item to the top" placement="top">
  <tk-button>Pin</tk-button>
</tk-tooltip>
<tk-tooltip text="Moves the item to the end" placement="end">
  <tk-button>Archive</tk-button>
</tk-tooltip>
  • placement — желательная сторона: top, bottom (по умолчанию), start или end. start и end следуют направлению текста.
  • Если места нет, пузырь переходит на противоположную сторону и не выходит за окно. Меняйте сторону, только чтобы не закрыть что-то важное.

Появление и скрытие

  • При наведении пузырь появляется через 400 мс, при фокусе с клавиатуры — сразу.
  • Он остаётся, пока указатель на триггере или на пузыре, и не исчезает по таймеру.
  • Esc скрывает его, а фокус остаётся на триггере.
  • Появляется и исчезает мгновенно, без анимации.
  • Касание ничего не открывает: оно срабатывает как нажатие на контрол. Не кладите в подсказку ничего важного, тогда на сенсорном экране ничего не потеряется.