Создание делегированных тултипов

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

tippy.delegate(document.body, {
  target: '.tooltip', // CSS-селектор элементов, к которым будет применяться тултип
  content: 'Пример тултипа',
});

В этом примере все элементы с классом .tooltip автоматически получают тултипы. Делегирование использует событие mouseover на родительском элементе и создаёт тултип только для элемента-мишени, что значительно снижает нагрузку на DOM.

Настройка контента делегированных тултипов

Контент можно задавать как строку, так и функцию, возвращающую строку. Функция получает объект reference, который ссылается на элемент, вызвавший тултип.

tippy.delegate(document.body, {
  target: '.tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
});

Использование атрибута data-tooltip позволяет каждому элементу иметь уникальный контент без отдельной инициализации.

Пользовательские опции делегированных тултипов

Делегирование поддерживает большинство стандартных опций Tippy.js:

  • placement – положение тултипа ('top', 'bottom', 'left', 'right').
  • animation – анимация появления ('fade', 'scale', 'shift-away').
  • delay – задержка появления и скрытия тултипа в миллисекундах.

Пример с настройками:

tippy.delegate(document.body, {
  target: '.tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  placement: 'right',
  animation: 'scale',
  delay: [100, 50],
});

В этом случае тултип появляется справа с плавным масштабированием и задержкой 100 мс при показе и 50 мс при скрытии.

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

Одно из главных преимуществ делегирования — поддержка элементов, созданных после инициализации. Например, если новые кнопки с классом .tooltip добавляются динамически через JavaScript, тултип автоматически активируется на них.

const container = document.querySelector('#container');

tippy.delegate(container, {
  target: '.tooltip',
  content(reference) {
    return reference.textContent;
  },
});

// Добавление нового элемента
const newButton = document.createElement('button');
newButton.className = 'tooltip';
newButton.textContent = 'Новая кнопка';
container.appendChild(newButton);

Новый элемент сразу будет иметь тултип без дополнительных вызовов tippy().

Взаимодействие с событиями и методами тултипов

Делегированные тултипы предоставляют доступ к методам через объект tippy. При создании делегирования можно получить экземпляр делегатора:

const delegateInstance = tippy.delegate(document.body, {
  target: '.tooltip',
  content: 'Делегированный тултип',
});

// Принудительно скрыть все тултипы
delegateInstance.hideAll();

Доступные методы: show(), hide(), enable(), disable(), destroy(), что позволяет гибко управлять поведением тултипов на странице.

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

Контент можно задавать не только текстом, но и HTML-структурой:

tippy.delegate(document.body, {
  target: '.tooltip',
  allowHTML: true,
  content(reference) {
    return `<strong>${reference.dataset.title}</strong><br>${reference.dataset.description}`;
  },
});

Опция allowHTML: true разрешает вставку HTML-кода, а функция content формирует индивидуальный контент для каждого элемента.

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

Делегированные тултипы значительно снижают нагрузку на страницу:

  • Один обработчик вместо N отдельных тултипов.
  • Нет необходимости инициализировать тултип для элементов, которые никогда не будут наведены.
  • Поддержка динамически добавляемых элементов без повторной инициализации.

Для страниц с сотнями элементов использование делегирования является стандартной практикой.

Дополнительные возможности

  • target может быть любым CSS-селектором или функцией, возвращающей элементы.
  • visibleOnly – при установке true тултип создаётся только для видимых элементов.
  • trigger – настраиваемые события ('mouseenter', 'focus' и т.д.) для активации тултипов.

Пример с кастомным триггером:

tippy.delegate(document.body, {
  target: '.tooltip',
  content: 'Триггер focus',
  trigger: 'focus',
});

Это полезно для форм и интерактивных элементов, где важно показывать подсказку при фокусе, а не при наведении мыши.

Оглавление