Метод setContent

Метод setContent является ключевым инструментом для динамического управления содержимым тултипов в библиотеке Tippy.js. Он позволяет изменять текст или HTML-контент тултипа после его создания, обеспечивая гибкость и интерактивность интерфейсов.

Синтаксис метода

instance.setContent(content)

Параметры:

  • content — новый контент тултипа. Может быть:

    • Строкой — простой текст или HTML.
    • DOM-элементом — <div>, <span> или любой другой элемент.
    • Функцией — возвращает строку или DOM-элемент, что позволяет динамически генерировать контент.

Метод вызывается на объекте тултипа (instance), который создается с помощью tippy().

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

1. Изменение текста тултипа

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

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

// Изменение текста через секунду
setTimeout(() => {
  tooltip.setContent('Обновлённый текст');
}, 1000);

В этом примере исходный текст тултипа заменяется на новый через 1 секунду после инициализации.

2. Использование HTML-контента

tooltip.setContent('<strong>Жирный текст</strong> и <em>курсив</em>');

Использование HTML позволяет создавать сложные структуры внутри тултипа, например списки, ссылки или изображения.

3. Динамическое содержимое с функцией

tooltip.setContent(() => {
  const date = new Date();
  return `Текущее время: ${date.toLocaleTimeString()}`;
});

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

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

Метод setContent работает в связке с show(), hide() и другими методами Tippy.js. Например:

tooltip.setContent('Обновлённый текст');
tooltip.show();

Это позволяет сначала обновить контент, а затем сразу показать тултип пользователю.

Особенности работы с DOM-элементами

  • Если передан DOM-элемент, Tippy.js клонирует его содержимое.
  • Изменения элемента вне тултипа не влияют на уже установленный контент, если только не используется функция для динамического получения содержимого.
  • Можно передавать сложные компоненты, например таблицы или списки, без потери стилей.

Ограничения и рекомендации

  • При использовании HTML-контента следует избегать инъекций непроверенного кода.
  • Метод не создаёт новый тултип, а изменяет существующий.
  • Частое обновление контента в короткие интервалы может снижать производительность, особенно при сложных структурах.

Пример комплексного применения

const infoButton = document.querySelector('#info');

const infoTooltip = tippy(infoButton, {
  content: 'Нажмите для получения информации',
  allowHTML: true
});

infoButton.addEventListener('click', () => {
  fetch('/api/info')
    .then(res => res.json())
    .then(data => {
      infoTooltip.setContent(`<ul>${data.items.map(item => `<li>${item}</li>`).join('')}</ul>`);
      infoTooltip.show();
    });
});

В этом примере тултип обновляется на основе данных с сервера и отображает список элементов в HTML-формате.

Метод setContent является универсальным и позволяет реализовать любые сценарии изменения тултипов: от простого текста до сложных динамических интерфейсов.

Оглавление