Tooltip

@cloud-ru/ds-tooltip — Пакет подсказок — компонент Tooltip для произвольного триггера и QuestionTooltip с иконкой «?» для полей форм и сложной терминологии.

Пакет @cloud-ru/ds-tooltip содержит всплывающие подсказки:

• Tooltip — универсальная подсказка. Оборачивает произвольный триггер (кнопка, иконка, текст) и показывает pop-up по hover, focus или клику.
• QuestionTooltip — специализированный вариант с готовым триггером «?» для полей форм и терминов.

Установка

pnpm add @cloud-ru/ds-tooltip

import { Tooltip, QuestionTooltip } from '@cloud-ru/ds-tooltip'

Tooltip

Всплывающая подсказка над произвольным триггером — четыре placement, четыре варианта trigger, поддержка клавиатуры и screen-reader.

Pop-up-подсказка над произвольным триггером. Принимает children (сам триггер) и tip (содержимое подсказки).

Когда использовать

• Для раскрытия контекста на icon-only кнопке («Настройки», «Экспорт»).
• Для подсказки по disabled-элементу — почему он недоступен.
• Для аббревиатур и терминов в таблицах.

Когда не нужен: для длинного описания — вместо этого Popover или отдельная страница.

Анатомия

Size

xs — короткие подписи на одной строке, s — многострочные подсказки и описания.

Примеры использования

1. Базовая подсказка

Hover + focus по умолчанию

import { Tooltip } from '@cloud-ru/ds-tooltip';

export function Basic() {
  return (
    <Tooltip tip='Сохранить изменения'>
      <button type='button'>Сохранить</button>
    </Tooltip>
  );
}

2. Click trigger

Открывается по клику и остаётся видимой

import { Tooltip } from '@cloud-ru/ds-tooltip';

export function ClickTrigger() {
  return (
    <Tooltip tip='Открывается по клику и остаётся видимой' trigger='click'>
      <button type='button'>Подробнее</button>
    </Tooltip>
  );
}

Props

TooltipProps

QuestionTooltip

Специализированный тултип с готовым триггером-иконкой «?» — для подсказок к полям форм и терминам.

Тултип с встроенным триггером — иконкой «?» размером 16px. Использует Tooltip под капотом, добавляя стандартный triggerButton с aria-label.

Когда использовать

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

Анатомия

Size

Размер триггера-иконки и тултипа: xs — для плотных форм, s — дефолт рядом с заголовками секций.

Примеры использования

Подсказка к полю формы

aria-label триггера задаётся через triggerLabel

import { QuestionTooltip } from '@cloud-ru/ds-tooltip';

export function Question() {
  return (
    <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
      <span>API-ключ</span>
      <input type='text' name='api-key' placeholder='sk_...' />
      <QuestionTooltip tip='Строка из 32 символов. Хранится зашифрованной, видна только владельцу.' />
    </label>
  );
}

Props

QuestionTooltipProps

Related types

• Size = "s" | "xs"