Отключение стандартных триггеров

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

Настройка триггеров через опцию trigger

Опция trigger отвечает за то, какое событие будет инициировать показ подсказки. Её значения могут быть:

  • 'hover' — показ при наведении мыши.
  • 'click' — показ при клике по элементу.
  • 'focus' — показ при получении фокуса (например, на инпуте).
  • 'custom' — отключение автоматического управления, подсказка отображается вручную через API.

Для полного отключения стандартных событий используется значение 'custom':

$('.tooltip-element').tooltipster({
    trigger: 'custom'
});

При этом подсказка не реагирует на hover, click или focus. Отображение и скрытие необходимо контролировать программно с помощью методов API: open(), close() или toggle().

Программное управление подсказкой

После установки триггера 'custom' управление осуществляется через методы:

var instance = $('.tooltip-element').tooltipster({
    trigger: 'custom'
}).tooltipster('instance');

// Открыть подсказку
instance.open();

// Закрыть подсказку
instance.close();

// Переключить состояние подсказки
instance.toggle();

Использование этих методов позволяет привязать показ подсказки к любым событиям, например, к таймерам, прокрутке страницы или пользовательским анимациям.

Отключение конкретных стандартных триггеров

Иногда необходимо не полностью отключать все события, а исключить только часть стандартных триггеров. Например, отключить hover, но оставить click. Tooltipster предоставляет возможность комбинирования:

$('.tooltip-element').tooltipster({
    trigger: 'click'
});

При этом hover и focus больше не вызывают подсказку.

Если необходимо полностью гибкое управление, следует использовать 'custom' и самостоятельно навешивать обработчики:

var instance = $('.tooltip-element').tooltipster({
    trigger: 'custom'
}).tooltipster('instance');

$('.tooltip-element').on('mouseenter', function() {
    instance.open();
}).on('mouseleave', function() {
    instance.close();
});

Управление поведением с помощью triggerOpen и triggerClose

Для более детального контроля Tooltipster поддерживает отдельные опции:

  • triggerOpen — массив событий, вызывающих открытие подсказки.
  • triggerClose — массив событий, вызывающих закрытие подсказки.

Пример отключения hover и фокуса, оставляя только click:

$('.tooltip-element').tooltipster({
    triggerOpen: { click: true },
    triggerClose: { click: true, mouseleave: false, blur: false }
});

Эта конфигурация позволяет точно указывать, какие события запускают открытие и закрытие подсказки, а какие игнорируются.

Взаимодействие с анимациями и задержкой

При отключении стандартных триггеров важно учитывать опции:

  • delay — задержка перед показом и скрытием подсказки.
  • animation — визуальный эффект появления и исчезновения.

Пример с ручным управлением и задержкой:

var instance = $('.tooltip-element').tooltipster({
    trigger: 'custom',
    delay: 200,
    animation: 'fade'
}).tooltipster('instance');

$('.tooltip-element').on('click', function() {
    instance.toggle();
});

Здесь delay применяется, несмотря на использование пользовательских событий, сохраняя плавность анимации.

Советы по использованию 'custom'

  • Всегда хранить ссылку на экземпляр Tooltipster через tooltipster('instance') для дальнейшего управления.
  • При динамическом создании элементов применять tooltipster после добавления элемента в DOM.
  • При отключении всех стандартных триггеров необходимо самостоятельно реализовать закрытие подсказки, иначе она может остаться видимой постоянно.
  • Комбинация 'custom' с событиями библиотеки jQuery или JavaScript позволяет интегрировать Tooltipster в сложные интерактивные интерфейсы без конфликтов со стандартными поведениями.

Использование опции trigger: 'custom' и соответствующих методов API делает Tooltipster максимально гибким инструментом, полностью освобождая разработчика от стандартного поведения подсказок.

Оглавление