Функции генерации содержимого

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

Строкой — простой текст или HTML-код.
DOM-элементом — позволяет вставлять готовую разметку.
Функцией — используется для динамического создания содержимого.

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

tippy('#button', {
  content: () => {
    const date = new Date();
    return `Текущее время: ${date.toLocaleTimeString()}`;
  }
});

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

Доступ к элементам и контексту

Функция content получает контекст через instance и reference, что позволяет строить сложные интерактивные тултипы.

tippy('#profile', {
  content: (reference) => {
    const userName = reference.dataset.userName;
    return `Профиль пользователя: ${userName}`;
  }
});

Здесь reference — элемент, на котором навешан тултип. Это даёт прямой доступ к атрибутам и данным элемента, что особенно удобно для списков или таблиц.

Использование HTML и шаблонов

Для генерации сложного содержимого часто применяют HTML-шаблоны. Tippy.js корректно обрабатывает DOM-элементы, что исключает необходимость работы напрямую с innerHTML при каждом обновлении.

const template = document.querySelector('#tooltip-template');

tippy('#card', {
  content: () => template.cloneNode(true)
});

Преимущества такого подхода:

Возможность многократного использования одного шаблона.
Сохранение стилей и событий внутри шаблона.
Минимизация манипуляций с DOM при открытии тултипа.

Ленивое обновление содержимого

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

const instance = tippy('#loadButton', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('/api/data')
      .then(res => res.text())
      .then(data => instance.setContent(data));
  }
});

Такой подход:

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

Обновление содержимого после инициализации

Tippy.js предоставляет метод setContent для динамического изменения содержимого после создания экземпляра.

const tip = tippy('#dynamic', {
  content: 'Начальное содержимое'
});

tip[0].setContent('Обновлённое содержимое');

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

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

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

let counter = 0;

tippy('#counter', {
  content: () => {
    counter += 1;
    return `Вы открыли тултип ${counter} раз`;
  }
});

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

Поддержка асинхронного контента

Хотя Tippy.js не делает асинхронные функции стандартным механизмом, их можно использовать через промисы и метод setContent.

tippy('#asyncButton', {
  content: 'Загрузка...',
  onShow(instance) {
    async function fetchData() {
      const response = await fetch('/api/info');
      const text = await response.text();
      instance.setContent(text);
    }
    fetchData();
  }
});

Это позволяет интегрировать Tippy.js с внешними API и динамическими данными без блокировки интерфейса.