Множественные тултипы на один элемент

Библиотека Tippy.js позволяет привязывать всплывающие подсказки к элементам страницы с высокой гибкостью. Одной из продвинутых возможностей является использование множественных тултипов для одного DOM-элемента. Это особенно полезно, когда один элемент должен отображать разную информацию в зависимости от контекста, состояния или пользовательского действия.

Подходы к созданию множественных тултипов

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

1. Несколько инстансов на одном элементе

Каждый тултип создается отдельно с собственными опциями.

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

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

const tip1 = tippy(btn, {
  content: 'Первая подсказка',
  trigger: 'mouseenter',
});

const tip2 = tippy(btn, {
  content: 'Вторая подсказка',
  trigger: 'click',
  placement: 'bottom',
});

В этом примере элемент #myButton получает два тултипа: один появляется при наведении, другой — при клике. Разные события trigger позволяют им работать независимо.

Важно: каждый инстанс управляет своим состоянием, поэтому тултипы не конфликтуют, если правильно настроены события.

2. Динамическая смена контента

Другой способ — один тултип, в котором содержимое изменяется в зависимости от условий. Для этого используется опция onShow или onTrigger.

const dynamicTip = tippy('#myButton', {
  content: 'Стартовый текст',
  onShow(instance) {
    if (someCondition) {
      instance.setContent('Подсказка для состояния A');
    } else {
      instance.setContent('Подсказка для состояния B');
    }
  },
  placement: 'right',
});

Преимущество такого подхода — меньше объектов Tippy, проще управление стилями и анимациями. Недостаток — тултип не может одновременно отображать несколько независимых подсказок.

Управление видимостью и состоянием

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

  • show() — открыть тултип программно
  • hide() — скрыть тултип
  • hideAll() — закрыть все тултипы на странице

Пример скрытия одного тултипа при открытии другого:

const tipHover = tippy('#myButton', {
  content: 'Наведение',
  trigger: 'mouseenter',
  onShow(instance) {
    tipClick.hide(); // закрывает второй тултип при наведении
  }
});

const tipClick = tippy('#myButton', {
  content: 'Клик',
  trigger: 'click',
  onShow(instance) {
    tipHover.hide(); // закрывает тултип наведения при клике
  }
});

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

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

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

const tipsData = [
  { content: 'Первая подсказка', trigger: 'mouseenter' },
  { content: 'Вторая подсказка', trigger: 'focus' },
  { content: 'Третья подсказка', trigger: 'click', placement: 'bottom' }
];

const element = document.querySelector('#multiTipButton');

const tips = tipsData.map(config => tippy(element, config));

Преимущество — легко масштабировать количество тултипов без дублирования кода, управлять ими через массив tips.

Особенности позиционирования

Несколько тултипов на одном элементе могут иметь разные placement. Tippy.js позволяет индивидуально задавать:

tippy('#myButton', { content: 'Сверху', placement: 'top' });
tippy('#myButton', { content: 'Снизу', placement: 'bottom' });

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

Работа с темами и стилями

Каждому инстансу можно присвоить отдельную тему:

tippy('#myButton', {
  content: 'Темная подсказка',
  theme: 'dark'
});

tippy('#myButton', {
  content: 'Светлая подсказка',
  theme: 'light',
  trigger: 'click'
});

Таким образом, можно визуально разделять информацию, передаваемую разными тултипами, даже на одном элементе.

Рекомендации по производительности

  1. Избегать создания слишком большого количества тултипов для одного элемента. Если подсказок более 3–4, лучше использовать динамический контент.
  2. Использовать destroy() для тултипов, которые больше не нужны, чтобы снизить нагрузку на DOM и память.
  3. Для динамически добавляемых элементов применять делегирование через delegate() вместо привязки к каждому элементу.
tippy.delegate(document.body, {
  target: '.has-tip',
  content: (reference) => reference.getAttribute('data-tip')
});

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

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

Оглавление