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

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

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

Tooltipster позволяет обрабатывать стандартные события клавиатуры через объект trigger и дополнительные опции. Основные клавиши, задействуемые в работе подсказок:

Tab – перемещение фокуса между интерактивными элементами страницы.
Enter / Space – открытие подсказки при фокусе на элементе.
Escape – закрытие открытой подсказки.
Arrow keys – управление навигацией внутри сложных подсказок с кастомным контентом.

Использование этих клавиш зависит от настроек trigger и interactive.

Опция `trigger`

Опция trigger определяет, каким образом подсказка активируется. Для клавиатуры важны следующие значения:

custom – позволяет полностью управлять открытием и закрытием через обработчики событий клавиатуры.
click – подсказка открывается нажатием клавиши Enter или Space на элементе, который находится в фокусе.
hover – стандартная активация при наведении, но при включенном interactive можно добавлять клавиатурное управление через фокус.

Пример инициализации:

$('.tooltip').tooltipster({
    trigger: 'click',
    interactive: true,
    functionReady: function(instance, helper){
        // Установка фокуса на первый интерактивный элемент подсказки
        $(helper.tooltip).find('button, a, input').first().focus();
    }
});

Опция `interactive`

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

$('.tooltip').tooltipster({
    interactive: true,
    trigger: 'click'
});

При активации подсказки через клавишу Enter фокус автоматически переносится внутрь.
Навигация с Tab перемещает фокус по элементам подсказки.
Escape закрывает подсказку и возвращает фокус на исходный элемент.

Управление фокусом вручную

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

$('.tooltip').on('keydown', function(e){
    const instance = $(this).tooltipster('instance');
    if (e.key === 'Escape') {
        instance.close();
        $(this).focus(); // возврат фокуса на элемент
    }
});

Для создания циклической навигации внутри подсказки можно использовать:

$(helper.tooltip).on('keydown', function(e){
    const focusable = $(this).find('button, a, input');
    let index = focusable.index(document.activeElement);

    if (e.key === 'Tab') {
        e.preventDefault();
        if (e.shiftKey) {
            index = (index - 1 + focusable.length) % focusable.length;
        } else {
            index = (index + 1) % focusable.length;
        }
        focusable.eq(index).focus();
    }
});

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

Настройка доступности (ARIA)

Tooltipster поддерживает атрибуты aria для корректной работы с экранными считывателями:

aria-describedby на элементе-инициаторе указывает на ID подсказки.
role="tooltip" на контейнере подсказки.
Автоматическая установка aria-hidden="true" при закрытии и aria-hidden="false" при открытии.

Пример:

$('.tooltip').tooltipster({
    content: $('<span id="tooltip1">Подсказка с формой</span>'),
    interactive: true,
    functionReady: function(instance, helper){
        $(helper.origin).attr('aria-describedby', 'tooltip1');
    }
});

Комбинирование мыши и клавиатуры

Tooltipster позволяет комбинировать мышиную навигацию и клавиатурное управление без конфликтов:

hover + focus: открытие подсказки при наведении мыши и фокусе клавиатуры.
click + focus: открытие по Enter/Space и закрытие по Escape.
interactive: сохраняет подсказку открытой при переходе фокуса внутри.

$('.tooltip').tooltipster({
    trigger: 'hover',
    interactive: true,
    functionInit: function(instance, helper){
        $(helper.origin).on('focus', function(){
            instance.open();
        }).on('blur', function(){
            instance.close();
        });
    }
});