Хук onMount

В библиотеке Tippy.js хук onMount позволяет выполнить пользовательский код в момент появления тултипа на странице. Это особенно полезно для динамического управления содержимым, запуска анимаций, или интеграции с другими библиотеками после того, как тултип полностью отрендерен и вставлен в DOM.

Синтаксис

tippy(target, {
  content: 'Пример тултипа',
  onMount(instance) {
    // код выполняется при монтировании тултипа
  }
});
  • target — селектор, элемент DOM или массив элементов, к которым привязывается тултип.
  • instance — объект тултипа, предоставляющий полный доступ к его API.

Свойства объекта instance

При вызове onMount хук получает инстанс тултипа, содержащий ключевые методы и свойства:

  • instance.popper — DOM-элемент тултипа (корневой контейнер).
  • instance.state — объект состояния тултипа (открыт/закрыт, анимация, placement).
  • instance.setContent(newContent) — метод для динамической замены контента.
  • instance.show() / instance.hide() — методы управления видимостью.
  • instance.destroy() — удаляет тултип полностью.

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

Пример: динамическая анимация при монтировании

tippy('#button', {
  content: 'Динамический тултип',
  onMount(instance) {
    instance.popper.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
    instance.popper.style.transform = 'scale(0.8)';
    instance.popper.style.opacity = '0';

    requestAnimationFrame(() => {
      instance.popper.style.transform = 'scale(1)';
      instance.popper.style.opacity = '1';
    });
  }
});

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

Взаимодействие с асинхронным контентом

onMount удобно использовать для загрузки данных перед отображением содержимого. Например, запрос к API:

tippy('#user', {
  content: 'Загрузка...',
  onMount(instance) {
    fetch('https://api.example.com/user-info')
      .then(res => res.json())
      .then(data => {
        instance.setContent(`Имя: ${data.name}<br>Email: ${data.email}`);
      })
      .catch(() => {
        instance.setContent('Не удалось загрузить данные');
      });
  }
});

Такой подход позволяет показывать предварительный текст «Загрузка…», а затем заменять его на реальные данные без закрытия тултипа.

Использование с компонентами фреймворков

При интеграции с React, Vue или Svelte onMount обеспечивает безопасное взаимодействие с DOM после того, как тултип создан. Пример с React:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import MyComponent from './MyComponent';

const button = document.querySelector('#react-button');

tippy(button, {
  content: '',
  onMount(instance) {
    const container = document.createElement('div');
    instance.popper.appendChild(container);
    ReactDOM.render(<MyComponent />, container);
  }
});

Это позволяет рендерить React-компоненты внутри тултипа только после его монтирования, избегая ошибок и конфликтов с виртуальным DOM.

Различие между onMount и другими хуками

  • onShow — вызывается перед анимацией появления тултипа, но до полной вставки в DOM.
  • onMount — вызывается после того, как тултип полностью смонтирован и доступен в DOM.
  • onHidden — срабатывает после скрытия тултипа.

Использование onMount предпочтительно, когда требуется прямой доступ к DOM для анимаций, динамического контента или интеграции с библиотеками визуализации.

Практические советы

  1. Избегать дорогостоящих операций: хук вызывается каждый раз при появлении тултипа, поэтому тяжелая логика может замедлять интерфейс.
  2. Использовать instance.popper для манипуляций с DOM, а не document.querySelector, чтобы избежать конфликтов при нескольких тултипах.
  3. Комбинировать с setContent для динамического обновления текста или компонентов.
  4. Отписываться от сторонних событий, если тултип будет уничтожен, чтобы предотвратить утечки памяти.

Комплексный пример

tippy('.item', {
  content: 'Информация загружается...',
  interactive: true,
  onMount(instance) {
    instance.popper.classList.add('custom-mount-animation');
    fetch(`https://api.example.com/item/${instance.reference.dataset.id}`)
      .then(res => res.json())
      .then(data => {
        instance.setContent(`<strong>${data.title}</strong><p>${data.description}</p>`);
      });
  }
});

В этом примере:

  • Тултип интерактивный (interactive: true), что позволяет кликать внутри него.
  • При монтировании добавляется CSS-класс для анимации.
  • Контент загружается асинхронно с API, при этом тултип уже отображается с текстом-заглушкой.

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

Оглавление