Комбинированные триггеры

Tooltipster позволяет управлять поведением подсказок через триггеры, которые определяют, как и когда показывать и скрывать тултип. Базовые триггеры включают hover, click, focus, custom. Однако для сложных интерфейсов часто требуется комбинировать несколько триггеров, чтобы обеспечить гибкую и интуитивную работу подсказок.

Настройка комбинированных триггеров

Для того чтобы использовать несколько событий одновременно, необходимо в опции trigger передать строку с перечислением событий через пробел. Например:

$('#element').tooltipster({
    trigger: 'hover click'
});

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

Управление скрытием при комбинированных триггерах

При использовании нескольких триггеров важно учитывать поведение скрытия подсказки. Tooltipster по умолчанию скрывает тултип при обратном событии:

  • Для hover — при уходе курсора
  • Для click — при повторном клике вне элемента
  • Для focus — при потере фокуса

Чтобы задать точное поведение скрытия, используется опция triggerClose, где можно определить отдельные правила для каждого триггера:

$('#element').tooltipster({
    trigger: 'hover click',
    triggerClose: {
        click: true,
        hover: true
    }
});

Здесь указывается, что подсказка скрывается и при уходе курсора, и при клике вне элемента.

Применение комбинированных триггеров с кастомными событиями

Для более сложных случаев можно добавлять custom-триггеры, которые активируются программно через методы open и close. Комбинируя стандартные триггеры с кастомными, можно создавать интерфейсы с контролем отображения тултипа из разных частей приложения:

$('#element').tooltipster({
    trigger: 'hover custom',
});

$('#openButton').on('click', function() {
    $('#element').tooltipster('open');
});

$('#closeButton').on('click', function() {
    $('#element').tooltipster('close');
});

Такой подход позволяет показывать подсказку при наведении и одновременно предоставлять возможность управлять её отображением из кода.

Порядок приоритетов событий

Tooltipster обрабатывает триггеры в порядке их указания в опции trigger. Это влияет на то, какое событие первично вызывает тултип, и как комбинированные триггеры взаимодействуют между собой. Если hover идет первым, тултип откроется при наведении, но при клике на элемент поведение может быть переопределено в зависимости от настроек triggerClose.

Ограничения и рекомендации

  • Не рекомендуется комбинировать hover и focus на одном элементе без строгого контроля triggerClose, так как это может вызвать неожиданные повторные открытия или “залипание” тултипа.
  • При комбинировании click и hover стоит явно указывать interactive: true, если тултип содержит элементы управления внутри. Это предотвратит случайное закрытие при движении мыши внутри подсказки.
$('#element').tooltipster({
    trigger: 'hover click',
    interactive: true
});
  • Для элементов с динамически изменяющимся содержимым или добавляемых в DOM рекомендуется использовать делегирование событий и инициализировать Tooltipster после добавления элемента, чтобы комбинированные триггеры работали корректно.

Практические сценарии использования

  1. Форма с подсказками полей: hover focus позволяет показывать подсказку при наведении на поле ввода и при фокусе, обеспечивая удобство на десктопе и мобильных устройствах.

  2. Кнопка с информацией и действиями: click hover с interactive: true позволяет показать тултип с кнопками внутри, где пользователь может кликнуть на внутренние элементы, не закрывая подсказку случайно.

  3. Комбинация с программным управлением: Использование custom вместе с другими триггерами позволяет управлять показом тултипа через события, инициируемые другими компонентами интерфейса, например, открытие подсказки при смене состояния приложения.

Итоговая структура комбинированного триггера

$('#element').tooltipster({
    trigger: 'hover click custom',
    triggerClose: {
        click: true,
        hover: true
    },
    interactive: true,
    animation: 'fade',
    delay: 200
});

Такой подход обеспечивает максимальную гибкость: подсказка реагирует на несколько событий, корректно закрывается и позволяет пользователю взаимодействовать с её содержимым.

Комбинированные триггеры становятся мощным инструментом при построении сложных интерфейсов, где один тип события недостаточен для удобного взаимодействия.

Оглавление