Методы show и hide

Библиотека Tippy.js предоставляет мощный API для управления всплывающими подсказками. Среди ключевых методов выделяются show и hide, позволяющие программно контролировать отображение тултипов. Эти методы являются частью объекта tippy-инстанса, возвращаемого при инициализации подсказки.

Метод show

Метод show отвечает за отображение тултипа, независимо от событий пользователя (например, наведения мышью или фокуса).

Синтаксис:

tippyInstance.show();

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

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

const tip = tippy(button, {
  content: 'Привет, я тултип!',
  trigger: 'manual', // Важно: ручное управление
});

document.querySelector('#showBtn').addEventListener('click', () => {
  tip.show();
});

Ключевые особенности метода show:

  • Ручной триггер: Чтобы show работал корректно независимо от событий, рекомендуется использовать trigger: 'manual'.
  • Анимация: Метод автоматически применяет настроенную анимацию (animation) и задержку (delay), если они заданы в конфигурации.
  • Поведение при повторном вызове: Если тултип уже видим, повторный вызов show не вызывает побочных эффектов — всплывающее окно остаётся видимым.

Метод hide

Метод hide скрывает тултип, аналогично обратной функции к show.

Синтаксис:

tippyInstance.hide();

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

document.querySelector('#hideBtn').addEventListener('click', () => {
  tip.hide();
});

Особенности метода hide:

  • Соблюдение анимации: Поддерживает анимацию скрытия, заданную через опцию animation.
  • Отмена при вызове show: Если hide вызывается одновременно с show (например, в колбэках), Tippy корректно обработает очередность.
  • События: При скрытии тултипа вызываются колбэки onHide и onHidden, если они были определены при инициализации.

Программное управление тултипами

Использование методов show и hide особенно полезно при сложной логике интерфейса:

  • Динамическое открытие при загрузке данных:
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    tip.setContent(`Загружено: ${data.value}`);
    tip.show();
  });
  • Закрытие при клике вне элемента:
document.addEventListener('click', (event) => {
  if (!button.contains(event.target)) {
    tip.hide();
  }
});
  • Управление группой тултипов:
const tips = tippy('.item', { trigger: 'manual' });

tips.forEach(t => t.show()); // показать все одновременно
tips.forEach(t => t.hide()); // скрыть все

Важные нюансы

  1. Совместимость с trigger: Для методов show и hide рекомендуется использовать trigger: 'manual'. Если установлен другой триггер (mouseenter, focus), программное управление всё равно работает, но может конфликтовать с автоматическим поведением.
  2. Методы и события: Методы вызывают стандартные события тултипа (onShow, onShown, onHide, onHidden), что позволяет интегрировать логику анимаций или обновления данных.
  3. Порядок вызова: Вызов hide до завершения анимации show корректно отменяет показ тултипа, предотвращая “мерцание” и визуальные баги.
  4. Совместимость с React и Vue: В обёртках для фреймворков show и hide работают на уровне инстансов компонента, позволяя программно управлять состоянием подсказок без прямого доступа к DOM.

Заключение по использованию

Методы show и hide — основные инструменты ручного управления тултипами в Tippy.js. Они обеспечивают полный контроль над видимостью подсказок, интеграцию с пользовательскими событиями и позволяют создавать динамические, интерактивные интерфейсы без ограничения стандартных триггеров.

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

Оглавление