Событие focus

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

Настройка отображения тултипа при фокусе

Для активации тултипа на событие focus используется опция trigger. Значение focus позволяет автоматически показывать тултип при получении элементом фокуса и скрывать его при потере фокуса. Пример инициализации:

$('#input-field').tooltipster({
    content: 'Введите ваше имя',
    trigger: 'focus',
    theme: 'tooltipster-light'
});

Ключевые моменты:

  • trigger: 'focus' — указывает, что тултип реагирует на фокус.
  • Тултип скрывается автоматически при событии blur.
  • Идеально подходит для <input>, <textarea> и интерактивных элементов формы.

Комбинация с другими триггерами

Tooltipster допускает использование нескольких триггеров одновременно. Например, сочетание hover и focus позволяет показывать тултип как при наведении мыши, так и при фокусе с клавиатуры:

$('#button').tooltipster({
    content: 'Нажмите для подтверждения',
    trigger: 'hover focus',
    animation: 'fade',
    delay: 200
});

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

  • Тултип будет отображаться при наведении и удержании фокуса.
  • Задержка delay регулирует время появления тултипа после события.
  • Анимация animation делает появление плавным.

Управление появлением и скрытием через API

Tooltipster предоставляет методы для ручного управления тултипами, что полезно для сложной логики с фокусом. Основные методы:

// Показ тултипа
$('#input-field').tooltipster('open');

// Скрытие тултипа
$('#input-field').tooltipster('close');

// Проверка состояния
var isOpen = $('#input-field').tooltipster('status'); // 'open' или 'closed'

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

Настройка фокуса на мобильных устройствах

На сенсорных устройствах событие focus может срабатывать иначе, чем на десктопе. В Tooltipster предусмотрены следующие подходы:

  • touchDevices: true — активирует тултипы на мобильных устройствах при касании элементов.
  • Использование сочетания trigger: 'click focus' для корректного поведения на iOS и Android.

Пример настройки:

$('#input-mobile').tooltipster({
    content: 'Заполните поле',
    trigger: 'click focus',
    touchDevices: true
});

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

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

$('#input-field').tooltipster({
    trigger: 'focus',
    functionBefore: function(instance, helper) {
        console.log('Фокус на элементе', helper.origin);
    },
    functionAfter: function(instance, helper) {
        console.log('Фокус потерян', helper.origin);
    }
});

Пояснения:

  • functionBefore вызывается перед показом тултипа.
  • functionAfter срабатывает после скрытия тултипа.
  • helper.origin содержит ссылку на элемент, на котором произошел фокус.

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

Tooltipster при использовании focus автоматически добавляет атрибуты aria-describedby, что улучшает доступность:

<input id="username" type="text" />
$('#username').tooltipster({
    content: 'Введите логин',
    trigger: 'focus'
});

В результате:

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

Выводы по использованию focus

  • Событие focus обеспечивает логичное и предсказуемое поведение тултипов для форм и интерактивных элементов.
  • Позволяет комбинировать несколько триггеров, управлять появлением через API и интегрировать с мобильными устройствами.
  • Поддержка ARIA делает интерфейс доступным для всех пользователей.
  • Колбэки functionBefore и functionAfter дают гибкость для сложной логики отображения.

Использование focus — ключ к созданию интуитивного интерфейса с адаптивными подсказками, где элементы форм реагируют на навигацию как с клавиатуры, так и с мыши.

Оглавление