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

Tooltipster — это мощная библиотека для создания интерактивных всплывающих подсказок в веб-приложениях на JavaScript. Для начала работы необходимо подключить jQuery и саму библиотеку Tooltipster. После подключения инструмент активируется на элементах через метод .tooltipster().

$('.tooltip-element').tooltipster({
    content: 'Простая подсказка',
    theme: 'tooltipster-light'
});

Ключевые моменты и параметры:

  • content — текст или HTML-содержимое подсказки.
  • theme — стиль отображения подсказки, поддерживаются стандартные темы или кастомные CSS.
  • animation — анимация появления (fade, grow, swing и др.).
  • delay — задержка перед отображением подсказки в миллисекундах.

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

Tooltipster предоставляет расширенные возможности работы с фокусом элементов, что особенно важно при навигации с клавиатуры.

$('.tooltip-element').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        mouseenter: true,
        focus: true
    },
    triggerClose: {
        mouseleave: true,
        blur: true
    }
});

Объяснение:

  • triggerOpen — события, при которых подсказка откроется.
  • triggerClose — события, при которых подсказка закроется.
  • focus и blur обеспечивают корректное поведение для клавиатурной навигации.

Использование focus особенно важно для форм и элементов управления, чтобы пользователь мог видеть подсказку, не используя мышь.

Настройка интерактивных подсказок

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

$('.tooltip-element').tooltipster({
    interactive: true,
    content: $('<div>Дополнительная информация <button>Подробнее</button></div>'),
    delay: 200
});
  • interactive: true позволяет подсказке принимать события мыши и фокус внутри себя.
  • Подходит для меню, кнопок и сложных форм.

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

При работе с формами и списками необходимо корректно управлять последовательным открытием подсказок с клавиатуры. Tooltipster позволяет комбинировать события focus с методами API.

$('.input-field').tooltipster({
    trigger: 'custom',
    triggerOpen: { focus: true },
    triggerClose: { blur: true }
});

// Программное открытие подсказки
$('.input-field').on('keydown', function(e) {
    if(e.key === 'Enter') {
        $(this).tooltipster('open');
    }
});

Особенности:

  • Методы .tooltipster('open') и .tooltipster('close') дают полный контроль через JS.
  • Комбинация с клавишами (Enter, Tab) улучшает доступность для пользователей с клавиатурой.

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

Для сложных форм с несколькими подсказками важно поддерживать порядок и правильное закрытие подсказок:

$('.form-input').tooltipster({
    trigger: 'custom',
    triggerOpen: { focus: true },
    triggerClose: { blur: true },
    functionBefore: function(instance, helper) {
        // Автоматически закрывать другие подсказки
        $('.form-input').not(helper.origin).tooltipster('close');
    }
});
  • functionBefore позволяет выполнять действия перед открытием подсказки, например, закрывать другие подсказки.
  • Это предотвращает наложение подсказок и путаницу при навигации по форме.

Стилизация подсказок с фокусом

Tooltipster легко интегрируется с CSS для улучшения визуальной навигации:

.tooltipster-light.tooltipster-shadow {
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
}

.tooltipster-light .tooltipster-content {
    color: #333;
    background: #f9f9f9;
}
  • Можно задавать тени, скругления и цвета для подсказок с фокусом.
  • Использование .tooltipster-content позволяет полностью кастомизировать текст и элементы внутри подсказки.

Динамическое обновление содержимого

Подсказки можно менять динамически в зависимости от фокуса или состояния элемента:

$('.tooltip-element').tooltipster({
    content: 'Начальное сообщение'
});

$('.tooltip-element').on('focus', function() {
    $(this).tooltipster('content', 'Сообщение обновлено при фокусе');
});
  • Метод content позволяет заменять текст или HTML в любой момент.
  • Полезно для подсказок с валидацией форм или интерактивными инструкциями.

Поддержка доступности (ARIA)

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

  • role="tooltip" — для подсказки.
  • aria-describedby — связывает элемент с подсказкой.

Это гарантирует корректное поведение при навигации с клавиатуры и использование вспомогательных технологий.

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

  • Использование focus и blur вместе с trigger: custom позволяет управлять подсказками через клавиатуру.
  • Параметр interactive делает подсказку интерактивной, сохраняя её открытой при наведении мыши.
  • Методы API (open, close, content) дают полный контроль над поведением подсказок.
  • functionBefore помогает управлять порядком отображения и предотвращать наложение подсказок.
  • Поддержка ARIA обеспечивает доступность для всех пользователей.

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

Оглавление