Вложенные тултипы

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

Основные принципы

Инициализация родительского тултипа Родительский тултип создаётся стандартным способом с помощью функции tippy() или метода createTippyInstance. Важно задать interactive: true, чтобы внутренняя область тултипа могла обрабатывать события мыши, иначе вложенные тултипы не будут открываться при наведении:

tippy('#parent-button', {
  content: `
    <div id="parent-content">
      Наведи на элемент внутри
      <span id="child-target">Child</span>
    </div>
  `,
  allowHTML: true,
  interactive: true,
  placement: 'right'
});

Создание вложенного тултипа Вложенный тултип создаётся отдельно, но его триггером служит элемент внутри родительского контента:

tippy('#child-target', {
  content: 'Это вложенный тултип',
  placement: 'top',
  interactive: true,
  hideOnClick: false
});

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

interactive: true – обязательно для работы вложенных тултипов.
hideOnClick: false – позволяет тултипу оставаться видимым при кликах внутри.

Управление поведением

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

delay – задержка открытия/закрытия тултипа. Для вложенных тултипов полезно задать небольшую задержку, чтобы избежать случайного закрытия при быстром движении мыши:

tippy('#child-target', {
  content: 'Вложенный тултип',
  delay: [100, 50],
  placement: 'top',
  interactive: true
});

trigger – можно настроить на 'mouseenter focus', чтобы тултип открывался при наведении или фокусе на элементе.
appendTo – позволяет помещать тултип в определённый контейнер, что упрощает работу с вложенностью и предотвращает конфликт с z-index:

tippy('#child-target', {
  content: 'Вложенный тултип',
  appendTo: document.body,
  interactive: true
});

Пример сложной вложенной структуры

В Tippy.js возможно создавать несколько уровней вложенности:

tippy('#level1', {
  content: `
    <div id="lvl1-content">
      Уровень 1
      <span id="level2">Уровень 2</span>
    </div>
  `,
  allowHTML: true,
  interactive: true
});

tippy('#level2', {
  content: `
    <div id="lvl2-content">
      Уровень 2
      <span id="level3">Уровень 3</span>
    </div>
  `,
  allowHTML: true,
  interactive: true
});

tippy('#level3', {
  content: 'Уровень 3 тултип',
  placement: 'right',
  interactive: true
});

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

Тонкости и лучшие практики

CSS стили: Для вложенных тултипов важно контролировать стили контейнера родителя, чтобы элементы не обрезались по overflow: hidden. Часто используют overflow: visible и position: relative на контейнерах.
События Tippy.js предоставляет хуки onShow, onHide и onMount, которые полезны для синхронизации поведения нескольких уровней. Например, можно автоматически закрывать вложенный тултип при уходе мыши с родителя:

tippy('#child-target', {
  content: 'Вложенный тултип',
  onShow(instance) {
    parentInstance.hide();
  }
});

Производительность При большом количестве вложенных тултипов рекомендуется инициализировать их лениво — только при первом наведении на родительский элемент, используя tippy.delegate() или динамическое создание через события.

Делегирование для множества вложенных элементов

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

tippy.delegate('#parent-container', {
  target: '.child',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  interactive: true
});

Такой подход сокращает количество создаваемых экземпляров и упрощает управление большим количеством элементов с вложенными подсказками.