Работа с элементами внутри тултипа

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

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

tippy(button, {
  content: document.querySelector('#tooltipContent'),
  allowHTML: true,
  interactive: true,
});

allowHTML: true — разрешает использование HTML-кода внутри тултипа.
interactive: true — делает тултип интерактивным, позволяя взаимодействовать с элементами внутри него (клики, ввод текста и т.д.).

Доступ к элементам тултипа через API

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

show() — отображение тултипа.
hide() — скрытие тултипа.
setContent(newContent) — динамическое изменение содержимого.
enable() / disable() — управление активностью тултипа.

Пример динамического изменения контента:

const tooltipInstance = tippy(button, {
  content: 'Первый контент',
  interactive: true,
});

tooltipInstance.setContent('<strong>Обновленный контент</strong>');

Обработка событий внутри тултипа

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

onShow(instance) — перед отображением тултипа.
onShown(instance) — после отображения.
onHide(instance) — перед скрытием.
onHidden(instance) — после скрытия.

Пример добавления обработчика клика на кнопку внутри тултипа:

const tooltipInstance = tippy(button, {
  content: `
    <div>
      <p>Нажмите кнопку:</p>
      <button id="innerButton">Клик</button>
    </div>
  `,
  allowHTML: true,
  interactive: true,
});

tooltipInstance.popper.addEventListener('click', (event) => {
  if (event.target.id === 'innerButton') {
    console.log('Кнопка внутри тултипа нажата');
  }
});

Использование шаблонов для сложного контента

Для удобного создания больших тултипов с формами, списками или картинками часто применяются шаблоны HTML. Можно хранить их в <template> и клонировать при инициализации:

<template id="tooltipTemplate">
  <div class="tooltip-content">
    <h3>Заголовок</h3>
    <input type="text" placeholder="Введите текст" />
    <button class="submitBtn">Отправить</button>
  </div>
</template>

const template = document.querySelector('#tooltipTemplate');

tippy(button, {
  content: template.content.cloneNode(true),
  allowHTML: true,
  interactive: true,
});

Использование cloneNode(true) позволяет создавать независимые экземпляры тултипа для каждого элемента.
Стилизация и работа с элементами внутри тултипа полностью контролируются через CSS и JS.

Доступ к элементам тултипа через `popper`

Каждый тултип обернут в контейнер Popper.js, доступ к которому осуществляется через свойство popper:

const tooltipInstance = tippy(button, { content: 'Пример', interactive: true });

const popperEl = tooltipInstance.popper;
const buttonInside = popperEl.querySelector('button');

Это позволяет:

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

Интерактивные формы и управление фокусом

Для форм внутри тултипа важно сохранить возможность взаимодействия без его закрытия. Параметр interactive: true гарантирует, что фокус мыши и клавиатуры не закроет тултип автоматически.

tippy(button, {
  content: `
    <form id="tooltipForm">
      <input type="text" placeholder="Ваше имя" />
      <button type="submit">Отправить</button>
    </form>
  `,
  allowHTML: true,
  interactive: true,
});

Для кнопок отправки можно назначать обработчики через popper или после создания тултипа через обычный document.querySelector.
Можно контролировать закрытие тултипа программно при успешной отправке формы через метод hide().

Управление множественными тултипами с интерактивным содержимым

При работе с несколькими элементами удобно хранить экземпляры тултипов в массиве:

const buttons = document.querySelectorAll('.tooltip-btn');
const instances = [];

buttons.forEach((btn) => {
  const instance = tippy(btn, {
    content: '<button class="inner">Кнопка</button>',
    allowHTML: true,
    interactive: true,
  });
  instances.push(instance);
});