Методы enable и disable

Библиотека Tippy.js предоставляет удобный способ создания и управления всплывающими подсказками (tooltips) на веб-странице. Методы enable и disable предназначены для динамического контроля активности тултипов, позволяя включать или отключать их реакцию на события пользователя.

Метод disable

Метод disable делает тултип неактивным, блокируя его появление при стандартных триггерах (mouseenter, focus и др.), не удаляя при этом сам объект Tippy из DOM. Этот подход полезен, когда необходимо временно предотвратить показ подсказок без их полной деструкции.

Синтаксис:

tippyInstance.disable();

Пример использования:

const btn = document.querySelector('#myButton');

const tip = tippy(btn, {
  content: 'Нажмите здесь для действия',
  trigger: 'mouseenter focus'
});

// Отключение тултипа
tip.disable();

После вызова disable() подсказка не будет отображаться даже при наведении курсора на кнопку или фокусе на элементе.

Метод disable не разрушает тултип, его можно снова активировать с помощью метода enable. Также disable не влияет на другие экземпляры Tippy, если они привязаны к разным элементам.

Метод enable

Метод enable восстанавливает нормальное поведение тултипа после его временного отключения. Подсказка вновь становится реагирующей на события, заданные при инициализации.

Синтаксис:

tippyInstance.enable();

Пример использования:

// Включение ранее отключённого тултипа
tip.enable();

После вызова enable() подсказка снова появится при наведении мыши или фокусе на элементе.

Взаимодействие enable и disable с другими методами

Методы enable и disable работают в связке с другими методами Tippy.js, такими как:

  • show() – принудительное отображение тултипа;
  • hide() – скрытие тултипа;
  • destroy() – полное удаление тултипа из DOM.

Пример сценария:

const btn = document.querySelector('#myButton');

const tip = tippy(btn, { content: 'Информация' });

// Временно отключаем тултип
tip.disable();

// Попытка показать тултип не сработает
tip.show(); // тултип не появится

// Включаем тултип обратно
tip.enable();

// Теперь тултип можно показать вручную
tip.show(); // тултип отобразится

Использование в условной логике

Методы enable и disable особенно полезны при динамическом изменении интерфейса. Например, если определённая функция на странице временно недоступна:

const btn = document.querySelector('#submitBtn');

const tip = tippy(btn, { content: 'Заполните все поля' });

// Проверка состояния формы
if (!formIsValid()) {
  tip.enable();  // показать подсказку при наведении
} else {
  tip.disable(); // отключить подсказку, так как форма валидна
}

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

Резюме по поведению

Метод Действие
disable() Временно отключает тултип, блокируя реакцию на события
enable() Восстанавливает работу тултипа после вызова disable()

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

Оглавление