Параметры содержимого

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

  • Строка
  • HTML-разметка
  • DOM-элемент
  • Функция (динамическое содержимое)

Простейший пример:

tippy(button, {
  content: 'Подсказка'
});

Строковое содержимое

Наиболее распространённый вариант — передача обычной строки:

tippy('.btn', {
  content: 'Нажмите для продолжения'
});

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

  • Автоматически экранируется (если не включён allowHTML)
  • Подходит для простых подсказок
  • Быстро работает, не требует дополнительных ресурсов

HTML-содержимое

Для более сложных интерфейсов используется HTML:

tippy('.btn', {
  content: '<strong>Важно:</strong> подтвердите действие',
  allowHTML: true
});

Ключевой параметр:

  • allowHTML: true — разрешает интерпретацию HTML

Без него HTML будет отображаться как текст.

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

Можно передавать существующие элементы:

const template = document.getElementById('tooltip-template');

tippy('.btn', {
  content: template
});

Преимущества:

  • Повторное использование шаблонов
  • Возможность сложной структуры (формы, кнопки и т.д.)

Важно:

  • Элемент перемещается в tooltip (не копируется)
  • При повторном использовании нужен клон:
content: template.cloneNode(true)

Динамическое содержимое через функцию

Функция позволяет генерировать содержимое на лету:

tippy('.btn', {
  content(reference) {
    return `ID элемента: ${reference.id}`;
  }
});

Аргумент reference — элемент, на который наведен курсор.

Использование:

  • Персонализация подсказок
  • Загрузка данных
  • Контекстно-зависимая логика

Асинхронное содержимое

Поддерживается загрузка данных с сервера:

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

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

  • Изначально отображается заглушка
  • Контент обновляется через instance.setContent()

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

Содержимое можно менять динамически:

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

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

Для множественных элементов:

tip.forEach(instance => {
  instance.setContent('Новый текст');
});

Атрибуты HTML как источник содержимого

По умолчанию Tippy.js использует атрибут title:

<button title="Подсказка"></button>

Инициализация:

tippy('button');

Дополнительно можно использовать data-tippy-content:

<button data-tippy-content="Подсказка"></button>

Преимущества:

  • Удобно для декларативного подхода
  • Не требует JS-конфигурации

Многострочное содержимое

Для переноса строк:

tippy('.btn', {
  content: 'Первая строка<br>Вторая строка',
  allowHTML: true
});

Или через CSS:

.tippy-box {
  white-space: pre-line;
}
content: 'Первая строка\nВторая строка'

Безопасность при использовании HTML

Использование allowHTML: true может привести к XSS-уязвимостям:

tippy('.btn', {
  content: userInput,
  allowHTML: true // потенциально опасно
});

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

  • Очищать пользовательский ввод (например, через DOMPurify)
  • Не вставлять сырой HTML из внешних источников

Форматирование и стилизация

Внутри tooltip можно использовать:

  • списки
  • изображения
  • кнопки
  • формы

Пример:

tippy('.btn', {
  content: `
    <div class="tooltip-content">
      <h4>Заголовок</h4>
      <p>Описание</p>
      <button>ОК</button>
    </div>
  `,
  allowHTML: true
});

Интерактивное содержимое

Для взаимодействия (клики, формы):

tippy('.btn', {
  content: '<button id="inside">Нажми</button>',
  allowHTML: true,
  interactive: true
});

Параметр:

  • interactive: true — позволяет взаимодействовать с содержимым

Без него tooltip исчезнет при попытке клика.

Поведение при пустом содержимом

Если content пустой:

content: ''

Tooltip не будет показан.

Это можно использовать для условного отображения:

content(reference) {
  return reference.dataset.tooltip || '';
}

Кэширование содержимого

По умолчанию функция content вызывается при каждом показе. Для оптимизации:

let cached;

tippy('.btn', {
  content() {
    if (!cached) {
      cached = 'Вычисленное значение';
    }
    return cached;
  }
});

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

Шаблоны позволяют централизовать разметку:

<template id="tpl">
  <div class="tooltip">
    <span class="text"></span>
  </div>
</template>
tippy('.btn', {
  content(reference) {
    const tpl = document.getElementById('tpl').content.cloneNode(true);
    tpl.querySelector('.text').textContent = reference.dataset.text;
    return tpl;
  }
});

Ограничения и особенности

  • DOM-элемент может существовать только в одном tooltip одновременно
  • HTML требует явного разрешения
  • Большие объёмы контента могут влиять на производительность
  • Асинхронные операции требуют контроля состояния

Практические сценарии

1. Подсказка с форматированием:

tippy('.info', {
  content: '<em>Дополнительная информация</em>',
  allowHTML: true
});

2. Контекстная подсказка:

tippy('.item', {
  content(el) {
    return `Элемент: ${el.dataset.name}`;
  }
});

3. Tooltip с шаблоном:

tippy('.card', {
  content() {
    return document.querySelector('#card-tooltip').cloneNode(true);
  }
});

4. Подгрузка данных:

tippy('.user', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch(`/user/${instance.reference.dataset.id}`)
      .then(r => r.text())
      .then(html => instance.setContent(html));
  }
});

Взаимосвязь с другими параметрами

Параметр content тесно связан с:

  • allowHTML — интерпретация HTML
  • interactive — возможность взаимодействия
  • maxWidth — ограничение ширины
  • theme — оформление
  • placement — позиционирование (влияет на восприятие содержимого)

Расширенные техники

Локализация:

const translations = {
  ru: 'Привет',
  en: 'Hello'
};

tippy('.btn', {
  content() {
    return translations[currentLang];
  }
});

Реактивное обновление:

const instance = tippy('.btn', {
  content: '0'
});

setInterval(() => {
  instance.setContent(Date.now());
}, 1000);

Интеграция с фреймворками:

В React/Vue часто используется рендер через виртуальный DOM, но Tippy остаётся источником контейнера для отображения.

Типичные ошибки

  • Отсутствие allowHTML при использовании HTML
  • Повторное использование одного DOM-элемента без клонирования
  • Необработанный пользовательский ввод
  • Отсутствие interactive при наличии кнопок
  • Избыточно тяжёлый контент

Параметр content превращает Tippy.js из простой подсказки в полноценный инструмент отображения динамического интерфейса, позволяя управлять не только текстом, но и сложной логикой взаимодействия и визуализации.

Оглавление