Жизненный цикл плагина

Создание всплывающей подсказки начинается с вызова функции tippy(). Основной синтаксис выглядит следующим образом:

tippy(targets, options);
  • targets — CSS-селектор, DOM-элемент или массив элементов, к которым привязывается тултип.
  • options — объект с настройками поведения и внешнего вида.

При инициализации создаётся экземпляр TippyInstance, который хранит все данные о состоянии тултипа, включая элементы DOM, события и настройки.

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

const tip = tippy(button, {
  content: 'Привет, мир!',
  placement: 'right',
  animation: 'fade'
});

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

Жизненный цикл тултипа

Жизненный цикл Tippy.js можно разделить на несколько ключевых стадий:

  1. Создание (Creation) На этой стадии создаётся DOM-структура тултипа, но он ещё не отображается. В эту фазу можно подключать кастомные обработчики через хуки:
tippy(button, {
  onCreate(instance) {
    console.log('Tippy создан:', instance);
  }
});
  1. Появление (Show) Активируется при срабатывании события mouseenter, focus или по явному вызову show(). Перед отображением выполняются хуки onShow и onTrigger:
tippy(button, {
  onShow(instance) {
    console.log('Тултип показывается');
  }
});
  • onTrigger вызывается при первом взаимодействии, ещё до визуального появления тултипа.
  • onShow выполняется перед анимацией появления.
  1. Отображение (Visible) Когда тултип полностью показан на экране, вызывается onMount:
tippy(button, {
  onMount(instance) {
    console.log('Тултип смонтирован в DOM');
  }
});
  • На этой стадии доступны все DOM-элементы тултипа для манипуляций.
  • Здесь часто добавляют динамический контент или выполняют расчёт размеров.
  1. Скрытие (Hide) При уходе мыши или потере фокуса вызываются хуки onHide и onUntrigger:
tippy(button, {
  onHide(instance) {
    console.log('Тултип скрывается');
  }
});
  • onUntrigger срабатывает, когда пользователь прекращает взаимодействие с элементом.
  • onHide выполняется перед анимацией скрытия тултипа.
  1. Удаление (Destroy) Полное удаление тултипа из DOM и освобождение ресурсов. Может быть вызвано вручную через метод destroy() или автоматически при удалении элемента:
tip.destroy();
  • После уничтожения экземпляр перестаёт реагировать на события.
  • Все привязанные обработчики событий удаляются.

Ключевые методы экземпляра Tippy.js

Метод Описание
show() Показать тултип программно
hide() Скрыть тултип программно
toggle() Переключение видимости
destroy() Полное удаление экземпляра
setContent(content) Изменение содержимого на лету
setProps(props) Обновление настроек тултипа после создания

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

tip.setContent('Новый текст');
tip.setProps({ placement: 'bottom', animation: 'scale' });
tip.show();

События и хуки

Tippy.js предоставляет богатый набор событий, которые позволяют полностью контролировать поведение тултипа:

  • onCreate – сразу после создания экземпляра.
  • onShow – перед анимацией появления.
  • onMount – после появления в DOM.
  • onShown – после завершения анимации появления.
  • onHide – перед анимацией скрытия.
  • onHidden – после завершения анимации скрытия.
  • onTrigger – при срабатывании события активации.
  • onUntrigger – при завершении взаимодействия.
  • onDestroy – при удалении экземпляра.

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

Жизненный цикл с асинхронным контентом

Для динамического контента часто применяются функции, возвращающие Promise:

tippy(button, {
  content: async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return `Значение: ${data.value}`;
  }
});
  • Tippy.js ожидает завершения Promise перед отображением тултипа.
  • Это удобно для загрузки данных с сервера или генерации сложных элементов на лету.

Позиционирование и обновление

Tippy.js использует библиотеку Popper.js для расчёта положения тултипа. Важные моменты жизненного цикла, связанные с позиционированием:

  • При создании тултипа рассчитывается начальное положение.
  • При отображении и монтировании автоматически вызывается popperInstance.update().
  • Можно вручную обновить позицию при изменении размеров или положения элемента:
tip.popperInstance.update();
  • Позиционирование учитывает смещение, границы видимой области и возможные перекрытия.

Итоговая структура жизненного цикла

  1. Создание (onCreate)
  2. Активация (onTrigger)
  3. Показ (onShow)
  4. Монтирование (onMount)
  5. Видимый тултип (onShown)
  6. Скрытие (onHide)
  7. Завершение скрытия (onHidden)
  8. Удаление (onDestroy)

Каждая стадия предоставляет возможность для тонкой настройки и контроля поведения тултипа, включая динамический контент, анимации и позиционирование.

Оглавление