Фокус элемента

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

Для включения реакции на фокус необходимо использовать опцию trigger. По умолчанию Tippy реагирует на событие mouseenter, но для работы с фокусом следует добавить focus:

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

В данном примере всплывающая подсказка появляется, когда элемент с id="myButton" получает фокус, и исчезает, когда фокус покидает элемент.

Использование нескольких триггеров

Tippy.js поддерживает комбинирование нескольких событий, что позволяет подсказке работать одновременно при наведении и при фокусе:

tippy('#myInput', {
  content: 'Введите данные',
  trigger: 'mouseenter focus',
});

Важно учитывать, что перечисление событий через пробел позволяет Tippy корректно обрабатывать их независимо. Таким образом, пользователь может как навести мышь на элемент, так и использовать клавишу Tab для получения подсказки.

Управление скрытием подсказки при потере фокуса

Подсказка автоматически скрывается, когда элемент теряет фокус, но поведение можно детализировать через опцию hideOnClick и метод blur. Например, если необходимо, чтобы подсказка оставалась видимой до явного закрытия:

tippy('#myInput', {
  content: 'Подсказка остаётся до закрытия',
  trigger: 'focus',
  interactive: true,
  hideOnClick: false,
});

Использование interactive: true позволяет пользователю взаимодействовать с содержимым подсказки (например, нажимать кнопки внутри неё) без её немедленного закрытия при потере фокуса.

Управление доступностью через фокус

Tippy.js интегрируется с стандартными атрибутами ARIA для повышения доступности:

  • aria-haspopup="true" указывает на наличие всплывающей подсказки.
  • aria-expanded динамически изменяется библиотекой при открытии и закрытии подсказки.
  • aria-describedby связывает элемент с подсказкой, улучшая взаимодействие с экранными читалками.

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

const button = document.querySelector('#accessibleButton');
tippy(button, {
  content: 'Подсказка для доступности',
  trigger: 'focus',
});
button.setAttribute('aria-haspopup', 'true');

Программное управление фокусом

Tippy предоставляет методы для явного управления открытием и закрытием подсказок через JavaScript. Это позволяет интегрировать подсказки с кастомной логикой фокуса:

const instance = tippy('#customFocus', {
  content: 'Подсказка управляется программно',
  trigger: 'manual',
});

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

Использование trigger: 'manual' делает подсказку полностью управляемой, что полезно для сложных интерфейсов, где фокус перемещается между несколькими элементами.

Настройка анимации при фокусе

Tippy.js поддерживает плавное появление и исчезновение подсказок при фокусе с помощью опций animation и duration:

tippy('#animatedFocus', {
  content: 'Анимированная подсказка',
  trigger: 'focus',
  animation: 'scale',
  duration: [300, 200], // [вход, выход]
});

Это обеспечивает визуальный комфорт и улучшает восприятие динамики интерфейса.

Интерактивные подсказки и фокус внутри

Если подсказка содержит интерактивные элементы, важно включить interactive: true и следить за фокусом внутри:

tippy('#interactiveFocus', {
  content: '<button>Кнопка внутри подсказки</button>',
  allowHTML: true,
  interactive: true,
  trigger: 'focus',
});

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

Обработка сочетаний клавиш

Tippy.js корректно работает с клавишами навигации, такими как Tab и Shift+Tab, при условии правильного использования триггера focus и интерактивного режима. Можно дополнительно отслеживать нажатия клавиш для кастомного поведения:

document.querySelector('#keyboardFocus').addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    tippy('#keyboardFocus').hide();
  }
});

Это позволяет обеспечить быстрый доступ к закрытию подсказки без использования мыши.

Выводы по фокусу элемента

Фокус в Tippy.js — ключевой инструмент для доступности и удобства клавиатурной навигации. Грамотное использование триггеров focus, опций interactive, trigger: 'manual', а также интеграция с ARIA-атрибутами позволяет создавать гибкие, безопасные и отзывчивые подсказки, которые корректно работают как с мышью, так и с клавиатурой.

Оглавление