Tooltip, popover или dialog: как выбрать правильный UI-оверлей

Tooltip объясняет соседний control, popover содержит небольшую задачу, а dialog создаёт отдельный контекст. В Pixso UI design maker выбирайте паттерн по работе overlay.

1. Сначала опишите работу overlay

Не начинайте с иконки. Запишите, что показать, что изменить и требуется ли блокировать фон. Для settings screen сравните visibility, workspace switcher и удаление workspace.

2. Tooltip — дополнительное пояснение

Tooltip подходит, когда trigger уже работает, текст короткий и неинтерактивный. Видимый label должен передавать основное значение без tooltip.

Hover недостаточен: нужны keyboard focus и touch. Не добавляйте tooltip ко всем знакомым icons.

3. Popover — компактная задача

Popover привязан к trigger и может содержать search, список, выбор и ссылку управления. Задайте outside click, Escape и перемещение focus.

Если появляются секции, сложная validation и review, переносите задачу в dialog или страницу.

4. Dialog — сфокусированное решение

Dialog создаёт отдельный interaction context. Для удаления покажите объект, последствие, подтверждение и cancel. Modal делает фон inert и переносит focus внутрь.

Опишите Tab, Shift+Tab, Escape, submitting, failure и возврат focus. Не используйте modal для обычного «сохранено».

5. Trigger, focus, dismissal и placement

В спецификации должны быть accessible label, initial focus, способы закрытия и правила размещения. Popover может перевернуться у края, а на mobile стать bottom sheet.

6. Pattern set в Pixso

Создайте отдельные components для tooltip, popover и dialog. Добавьте search, no results, selected, loading и failure states, а behavior укажите рядом.

7. Edge cases до handoff

• Длинный перевод и zoom 200% не скрывают пояснение.
• Keyboard позволяет открыть, выбрать и закрыть.
• Popover выдерживает search, no results и loading.
• Dialog объясняет consequence и не исчезает при failure.
• Несовместимые overlays не открыты одновременно.

Визуальный canvas не доказывает focus containment, reading order и timing announcements. Implementation test должен быть отдельным gate.

Заключение

Tooltip нужен для описания, popover — для компактной контекстной задачи, dialog — для решения, которое может приостановить страницу. Сопоставьте overlay с работой и передайте behavior из Pixso.