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

Tippy.js предоставляет гибкие возможности для работы с динамическим контентом, что особенно важно при создании интерактивных интерфейсов. Динамическое содержимое позволяет изменять текст или HTML подсказки в реальном времени, основываясь на данных пользователя, событиях или изменениях DOM.

Использование функции для генерации контента

Вместо передачи статической строки в опцию content, можно использовать функцию, которая возвращает строку или элемент DOM. Это позволяет обновлять содержимое при каждом отображении тултипа:

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

Ключевые моменты:

  • Функция вызывается каждый раз, когда тултип становится видимым.
  • Параметр reference ссылается на элемент, к которому привязан тултип.
  • Опция allowHTML: true необходима для работы с HTML-контентом, иначе любые теги будут экранированы.

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

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

const tooltip = tippy('#updateButton', {
  content: 'Изначальный текст',
});

document.querySelector('#updateContent').addEventListener('click', () => {
  tooltip[0].setContent('Обновлённый текст с новым значением');
});

Особенности:

  • tooltip возвращает массив экземпляров Tippy, даже если элементов один.
  • setContent может принимать как текст, так и HTML-элемент.
  • Можно комбинировать с любыми событиями для динамического обновления.

Загрузка контента с сервера

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

tippy('#asyncButton', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('https://api.example.com/tooltip')
      .then(res => res.text())
      .then(data => instance.setContent(data))
      .catch(() => instance.setContent('Ошибка загрузки'));
  },
});

Рекомендации:

  • Начальный текст помогает пользователю понять, что данные загружаются.
  • onShow вызывается при каждом открытии тултипа, что позволяет получать свежие данные.
  • Обработка ошибок необходима для предотвращения пустых подсказок.

Использование HTML-контента и элементов DOM

Tippy.js позволяет вставлять элементы DOM, а не только строки:

const contentElement = document.createElement('div');
contentElement.innerHTML = `<strong>Интерактивный контент</strong>`;

tippy('#htmlButton', {
  content: contentElement,
  allowHTML: true,
});

Примечания:

  • При использовании DOM-элементов можно добавлять кнопки, ссылки и другие интерактивные элементы.
  • Если элемент уже находится в DOM, Tippy.js клонирует его. Для повторного использования стоит создавать копию.

Динамическая реакция на события

Контент тултипа может зависеть от состояния элемента:

tippy('.statusButton', {
  content: (reference) => {
    return reference.dataset.status === 'active' ? 'Активно' : 'Неактивно';
  }
});

Особенности:

  • Использование data-* атрибутов упрощает хранение состояния элемента.
  • Функция контента позволяет учитывать любые свойства DOM или внешние переменные.
  • Подходит для списков и таблиц с изменяющимися данными.

Комбинация с анимациями и интерактивностью

Динамическое содержимое легко интегрируется с интерактивными тултипами:

tippy('#interactiveButton', {
  content: () => {
    const div = document.createElement('div');
    div.innerHTML = `<button id="innerButton">Нажми меня</button>`;
    div.querySelector('#innerButton').addEventListener('click', () => alert('Кнопка нажата'));
    return div;
  },
  interactive: true,
  allowHTML: true,
});

Особенности:

  • Опция interactive: true позволяет пользователю взаимодействовать с элементами внутри тултипа.
  • Поддерживаются события внутри динамически созданного контента.
  • HTML-контент можно комбинировать с любыми CSS-анимациями и стилями.

Практические рекомендации

  1. Минимизировать вычисления внутри функции контента — если данные статичны на короткий промежуток, лучше кешировать их.
  2. Использовать allowHTML только при необходимости — повышает безопасность и предотвращает инъекции.
  3. Проверять размеры и положение тултипа при вставке динамических элементов, чтобы избежать обрезки содержимого.
  4. Для большого объёма данных стоит комбинировать динамическое содержимое с appendTo: document.body для корректного отображения вне родительских контейнеров.

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

Оглавление