Фокус и навигация

Tippy.js предоставляет гибкий способ управления всплывающими подсказками и их поведением относительно фокуса и навигации с клавиатуры. Основным элементом контроля является параметр trigger, который определяет, каким событием будет активироваться тултип. Для фокусируемых элементов (например, кнопок или ссылок) рекомендуется использовать trigger: 'focus'. В этом случае тултип автоматически открывается при получении элементом фокуса и закрывается при его потере.

tippy('#myButton', {
  content: 'Подсказка при фокусе',
  trigger: 'focus',
});

Использование focus вместо mouseenter обеспечивает доступность для пользователей, которые используют клавиатуру для навигации.

Keyboard navigation и accessibility

Для поддержки навигации с клавиатуры Tippy.js интегрируется с атрибутами ARIA. При создании тултипа автоматически добавляются атрибуты aria-describedby на элемент-источник, связывая его с подсказкой. Это позволяет скринридерам корректно озвучивать содержимое подсказки.

tippy('#inputField', {
  content: 'Введите ваше имя',
  trigger: 'focus',
});

В сочетании с библиотекой Popper.js, Tippy.js гарантирует, что подсказка корректно позиционируется даже при навигации с клавиатуры, что предотвращает её обрезание на экране.

Контроль открытия и закрытия через программный API

Помимо автоматических событий, тултипы могут управляться вручную с помощью методов show(), hide() и toggle(). Это полезно для сложных форм или динамических интерфейсов, где поведение фокуса зависит от состояния приложения.

const instance = tippy('#myInput', {
  content: 'Обязательное поле',
  trigger: 'manual',
});

document.querySelector('#myInput').addEventListener('focus', () => instance.show());
document.querySelector('#myInput').addEventListener('blur', () => instance.hide());

Использование trigger: 'manual' полностью снимает стандартное управление и позволяет программно синхронизировать тултип с любым событием.

Фокус внутри тултипа

Tippy.js поддерживает интерактивные тултипы через параметр interactive: true. Это позволяет элементам внутри подсказки получать фокус, например, кнопкам или ссылкам. В комбинации с trigger: 'focus' интерактивность делает возможным работу с подсказками как с мини-диалогами.

tippy('#infoIcon', {
  content: '<button>Нажми меня</button>',
  allowHTML: true,
  interactive: true,
  trigger: 'focus',
});

При этом тултип не закроется при перемещении фокуса внутрь содержимого, а закроется только после потери фокуса всеми интерактивными элементами.

Навигация между элементами с тултипами

Для сложных интерфейсов с множеством подсказок важно управлять порядком навигации. В HTML-коде следует корректно расставлять атрибуты tabindex, чтобы последовательность фокуса соответствовала логике приложения. Tippy.js не вмешивается в порядок табуляции, но поддерживает корректное отображение тултипов при навигации клавишей Tab или Shift+Tab.

<button id="btn1" tabindex="1">Кнопка 1</button>
<button id="btn2" tabindex="2">Кнопка 2</button>
tippy('#btn1, #btn2', {
  content: 'Подсказка',
  trigger: 'focus',
});

Настройка задержек для фокусируемых элементов

Параметры delay позволяют установить отдельные интервалы для открытия и закрытия тултипа. Для элементов с фокусом это важно, чтобы избежать резких всплытий при случайном кратковременном фокусе.

tippy('#emailInput', {
  content: 'Введите email',
  trigger: 'focus',
  delay: [100, 300], // открытие через 100ms, закрытие через 300ms
});

Автоматическое закрытие при потере фокуса

По умолчанию, тултип с trigger: 'focus' закрывается при потере фокуса. Для сложных случаев можно комбинировать interactive: true и слушать события onHide или onShow, чтобы реализовать кастомные сценарии, например, проверку состояния формы перед закрытием подсказки.

tippy('#username', {
  content: 'Имя пользователя должно быть уникальным',
  trigger: 'focus',
  interactive: true,
  onHide(instance) {
    console.log('Тултип закрыт');
  },
});

Резюме по фокусу и навигации

  • trigger: ‘focus’ — основной способ для доступности и работы с клавиатурой.
  • interactive: true — позволяет работать с интерактивным контентом внутри подсказки.
  • manual trigger — дает полный контроль через программный API.
  • ARIA и tabindex — обязательны для корректной навигации и поддержки скринридеров.
  • delay — регулирует поведение всплытия и скрытия для более мягкой UX.

Эти возможности делают Tippy.js мощным инструментом для создания доступных, управляемых и интерактивных подсказок с полной поддержкой фокуса и навигации клавиатурой.

Оглавление