Подсказка

Текст подсказки живёт в data-атрибуте и рисуется псевдоэлементом, поэтому здесь нет скрипта, нечего позиционировать во время выполнения и ничего не остаётся в DOM. Она появляется при наведении и при фокусе с клавиатуры — за это отвечает половина правила с :focus-within.

Простая подсказка

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Скопировать в буфер обмена' },
    iconButton({
      label: 'Копировать',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Пересобрать сайт' },
    button({ variant: 'outline', color: 'neutral' }, 'Пересобрать'),
  ),
)

Расположение

По умолчанию сверху, снизу — когда сверху нет места.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Над элементом' },
    button({ variant: 'soft', color: 'neutral' }, 'Сверху'),
  ),
  tooltip({ content: 'Под элементом', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Снизу'),
  ),
)

Доступные имена

Текст подсказки — декорация: он рисуется из CSS-свойства content, которое скринридеры объявляют ненадёжно. Элементу внутри всё равно нужно собственное доступное имя, и его даёт label у iconButton(). Когда подсказка говорит то, чего нет в имени элемента, передайте label: true, чтобы повторить её в визуально скрытом span.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Немедленно выкатывает в продакшн', label: true },
    button({ color: 'danger' }, 'Развернуть'),
  ),
)

На тексте

Подсказка оборачивает строчное содержимое так же охотно, как и кнопку.

text(
  'Сборка пишет в ',
  tooltip({ content: 'Настраивается через outDir' }, code('dist/')),
  ' и больше никуда.',
)

Когда её не нужно

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

Пропсы