Хук onShow

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

Сигнатура и параметры

Хук onShow принимает функцию обратного вызова следующего вида:

tippy(targetElement, {
  content: 'Пример тултипа',
  onShow(instance) {
    // действия перед показом тултипа
  }
});

Параметры функции:

  • instance — объект Tippy, представляющий конкретный тултип. Через него можно получить доступ к текущим настройкам, элементу DOM тултипа (instance.popper), целевому элементу (instance.reference) и методам управления тултипом (instance.hide(), instance.setContent(), и т.д.).

Возвращаемое значение

Функция onShow может вернуть:

  • true или undefined — тултип отображается как обычно.
  • false — предотвращает показ тултипа. Это позволяет динамически блокировать всплытие подсказки в зависимости от состояния страницы или условий логики.

Пример динамической блокировки:

tippy('#button', {
  content: 'Нажмите на меня',
  onShow(instance) {
    if (instance.reference.disabled) {
      return false; // не показывать тултип, если кнопка заблокирована
    }
  }
});

Динамическое изменение содержимого

Часто требуется, чтобы тултип показывал разное содержимое в зависимости от контекста. Хук onShow идеально подходит для этого:

tippy('.user', {
  onShow(instance) {
    const userId = instance.reference.dataset.userId;
    fetch(`/api/user/${userId}`)
      .then(res => res.json())
      .then(data => {
        instance.setContent(`Имя: ${data.name}<br>Возраст: ${data.age}`);
      });
  }
});

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

Использование с анимациями и кастомными стилями

Хук onShow также полезен для запуска кастомных анимаций или динамической подгрузки стилей:

tippy('.tooltip', {
  onShow(instance) {
    instance.popper.style.opacity = 0;
    setTimeout(() => {
      instance.popper.style.transition = 'opacity 0.3s';
      instance.popper.style.opacity = 1;
    }, 0);
  }
});

Здесь тултип сначала скрыт, затем плавно проявляется, создавая эффект кастомной анимации.

Взаимодействие с другими хуками

onShow срабатывает перед хуком onMount, что позволяет:

  • Подготавливать содержимое и стили до монтирования тултипа в DOM.
  • Взаимодействовать с внешними состояниями и предотвращать показ при необходимости.

Последовательность ключевых хуков:

  1. onShow — проверка условий, динамическое обновление содержимого.
  2. onMount — тултип уже вставлен в DOM, можно измерять размеры.
  3. onShown — тултип полностью отображен.

Примеры сложного использования

Динамический контент + предотвращение показа:

tippy('.product', {
  onShow(instance) {
    const stock = instance.reference.dataset.stock;
    if (parseInt(stock) === 0) {
      return false; // не показывать подсказку, если товара нет в наличии
    }
    instance.setContent(`Остаток на складе: ${stock} шт.`);
  }
});

Интеграция с внешними библиотеками:

import { createChart } from 'chart.js';

tippy('#chart-tooltip', {
  onShow(instance) {
    const ctx = instance.popper.querySelector('canvas').getContext('2d');
    createChart(ctx, { type: 'bar', data: chartData });
  }
});

Резюме функциональных возможностей onShow

  • Позволяет контролировать показ тултипа: разрешить или запретить.
  • Обеспечивает динамическое обновление контента перед показом.
  • Упрощает интеграцию с анимациями и стилями.
  • Работает в связке с другими хуками жизненного цикла для точного управления поведением тултипа.

onShow является ключевым инструментом для создания интерактивных и динамичных подсказок, позволяя адаптировать их поведение к состоянию приложения.

Оглавление