Управление с клавиатуры

Tippy.js изначально проектировалась как легковесная и гибкая библиотека для создания всплывающих подсказок и тултипов. Помимо стандартного поведения при наведении мышью, библиотека предоставляет расширенные возможности управления с клавиатуры, что критически важно для доступности (accessibility, a11y) и удобства работы пользователей без мыши.

Основные события клавиатуры

Tippy.js позволяет перехватывать и обрабатывать клавиатурные события, обеспечивая полное управление подсказками с помощью клавиш. Ключевые аспекты:

  1. Фокусировка на элементе Tippy автоматически может открывать тултип при фокусе на элементе через клавишу Tab. Для этого используется параметр:

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

    Здесь focus отвечает за активацию тултипа при фокусировке через клавиатуру. Это гарантирует, что пользователь, который навигацирует с помощью клавиш Tab и Shift+Tab, увидит подсказку.

  2. Закрытие с клавиатуры По умолчанию Tippy.js поддерживает закрытие подсказок с помощью клавиши Escape. Реализуется через встроенную логику, но можно настроить собственное поведение:

    tippy(button, {
  content: 'Нажмите Esc чтобы закрыть',
  hideOnClick: true,
});

button.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    button._tippy.hide();
  }
});

    Важно: для управления через клавиатуру Tippy.js хранит ссылку на объект тултипа в element._tippy, что позволяет программно вызывать методы show(), hide(), toggle().

Навигация между подсказками

Для сложных интерфейсов с несколькими тултипами можно реализовать циклическую навигацию клавишами Tab и Shift+Tab. Пример:

const buttons = document.querySelectorAll('.tooltip-button');

buttons.forEach((button) => {
  tippy(button, {
    content: button.dataset.tooltip,
    trigger: 'focus',
    interactive: true,
  });

  button.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowRight') {
      const next = button.nextElementSibling || buttons[0];
      next.focus();
    }
    if (event.key === 'ArrowLeft') {
      const prev = button.previousElementSibling || buttons[buttons.length - 1];
      prev.focus();
    }
  });
});

В этом примере:

  • ArrowRight перемещает фокус к следующему элементу с тултипом.
  • ArrowLeft возвращает фокус к предыдущему элементу.
  • Цикличная навигация обеспечивает доступность для клавиатурных пользователей.

Управление с помощью модификаторов

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

  • interactive — делает тултип кликабельным и фокусируемым.
  • keyboard — добавляется через плагин tippy.js/headless для полноценного управления клавишами внутри тултипа.

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

tippy(button, {
  content: 'Тултип с клавиатурным управлением',
  trigger: 'focus',
  interactive: true,
  onShow(instance) {
    instance.popper.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        console.log('Enter внутри тултипа');
      }
    });
  }
});

Здесь можно реализовать обработку Enter, Tab, Escape или любых других клавиш внутри тултипа, не нарушая стандартной логики навигации документа.

Адаптивное поведение для клавиатуры

Tippy.js автоматически учитывает:

  • Фокусируемые элементы внутри тултипа при interactive: true.
  • Закрытие при потере фокуса (blur) или нажатии Escape.
  • Возможность управлять последовательностью появления тултипов через кастомные события show и hide.

Для сложных интерфейсов полезно комбинировать эти возможности с библиотеками типа focus-trap, чтобы полностью контролировать фокус внутри всплывающего окна.

Практические рекомендации

  • Всегда включать focus в список trigger, если поддерживается клавиатурная навигация.
  • Использовать interactive: true, если внутри тултипа есть кнопки или ссылки.
  • Обрабатывать Escape для немедленного закрытия, чтобы соответствовать стандартам a11y.
  • При наличии нескольких тултипов использовать ArrowLeft / ArrowRight или Tab для навигации.
  • Для сложной логики клавиатурного управления подключать кастомные слушатели keydown и методы _tippy.show() / _tippy.hide().

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

Оглавление