Tooltip

Паттерны

Подсказка к иконке

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

• Иконке или компактному триггеру нужно короткое пояснение.

Заметки о композиции:

• Дайте триггеру собственную метку.
• Держите содержимое тултипа короче, чем понадобилось бы поповеру.

Компромиссы:

• Справка без лишних усилий.
• Плохо подходит для обязательных инструкций.

import {
  Icon,
  IconButton,
  Text,
  Tooltip,
  TooltipArrow,
  TooltipContent,
  TooltipTrigger,
} from '@vega-ui/react';
import { ArchiveIcon, ReplyIcon, Trash2Icon } from '@vega-ui/icons';

const actions = [

Справка к полю

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

• Полю нужен необязательный фоновый контекст.

Заметки о композиции:

• Держите основную метку вне тултипа.
• Используйте тултип только для необязательного пояснения, а не для валидации.

Компромиссы:

• Формы остаются чистыми.
• Легко злоупотребить для обязательных инструкций.

import { useId, useState, type FormEvent } from 'react';
import {
  Button,
  Icon,
  IconButton,
  Label,
  Text,
  TextField,
  TextFieldInput,
  Tooltip,
  TooltipArrow,
  TooltipContent,

Подсказка в плотных данных

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

• Таблицам, метрикам или компактным строкам настроек нужно очень короткое пояснение.

Заметки о композиции:

• Текст должен быть описательным и легко просматриваться.
• Предпочитайте одно предложение многошаговым инструкциям.

Компромиссы:

• Помогает сохранить плотную раскладку.
• Быстро перестаёт работать, если пояснение превращается в руководство по сценарию.

import {
  Icon,
  IconButton,
  Text,
  Tooltip,
  TooltipArrow,
  TooltipContent,
  TooltipTrigger,
} from '@vega-ui/react';
import { InfoIcon } from '@vega-ui/icons';

const metrics = [

Сравнение

Быстрое правило выбора

Выбирайте Tooltip, когда содержимое краткое, дополнительное и несущественное.

Tooltip и Popover

Используйте Tooltip, когда:

• содержимое — просто подсказка или описание

Используйте Popover, когда:

• содержимое богаче или интерактивно

Tooltip и Dialog

Используйте Tooltip, когда:

• пользователю не нужно модальное взаимодействие

Используйте Dialog, когда:

• содержимое представляет настоящий сценарий задачи

Выбирайте этот компонент, когда

• содержимое — короткая подсказка
• интерфейс должен оставаться немодальным и лёгким

Не выбирайте этот компонент, когда

• содержимое обязательное, интерактивное или связано с задачей

Решение проблем

Содержимое тултипа слишком важное

Симптом

Без тултипа пользователь не может правильно выполнить задачу.

Вероятная причина

Обязательные инструкции помещены в дополнительный компонент.

Как проверить

• Скройте тултип и проверьте, остаётся ли контрол понятным.

Решение

• Перенесите важные инструкции в видимый интерфейс.

Тултип внутри оверлея ведёт себя нестабильно

Симптом

Тайминг или расположение тултипа странно ведут себя внутри диалога или другого оверлея.

Вероятная причина

Тултип проверяли только изолированно.

Как проверить

• Отрендерите его внутри реального сценария с оверлеем.

Решение

• Перепроверьте именно этот стек и при необходимости упростите его.

Тултипу, вероятно, стоит быть поповером

Симптом

Содержимое продолжает расти, и в нём начинают требоваться действия, поля формы или несколько абзацев.

Вероятная причина

Тултип используется для более богатого контекстного оверлея, чем тот, для которого он задуман.

Как проверить

• Проверьте, есть ли в содержимом контролы или инструкции к задаче.
• Сравните опыт с Popover.

Решение

• Перейдите на Popover для более богатого контекстного содержимого.
• Держите содержимое тултипа коротким и исключительно дополнительным.