Переключение между элементами

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

Tippy.js работает с массивами элементов и предоставляет методы для динамического управления тултипами, что делает переключение плавным и эффективным.

Инициализация тултипов для нескольких элементов

Для начала необходимо создать набор элементов и инициализировать для них Tippy.js. Пример:

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

tippy(buttons, {
  content: (reference) => reference.getAttribute('data-tooltip'),
  animation: 'fade',
  delay: [100, 50],
  placement: 'top',
});

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

  • querySelectorAll возвращает коллекцию элементов, на которые можно навесить одинаковую конфигурацию тултипов.
  • content может быть функцией, чтобы динамически подставлять текст из атрибута data-tooltip.
  • animation, delay и placement позволяют тонко настроить визуальное поведение при переключении между элементами.

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

По умолчанию Tippy.js автоматически скрывает предыдущий тултип при активации нового. Для более сложного управления используется метод show() и hide():

const tooltip1 = tippy(document.querySelector('#btn1'), { content: 'Подсказка 1' });
const tooltip2 = tippy(document.querySelector('#btn2'), { content: 'Подсказка 2' });

document.querySelector('#btn1').addEventListener('mouseenter', () => {
  tooltip1.show();
  tooltip2.hide();
});

document.querySelector('#btn2').addEventListener('mouseenter', () => {
  tooltip2.show();
  tooltip1.hide();
});

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

  • show() открывает тултип, hide() закрывает.
  • Явное управление важно при кастомных сценариях, когда стандартного переключения followCursor или триггера mouseenter недостаточно.
  • Можно комбинировать с interactive: true для элементов, содержащих внутри интерактивные компоненты.

Использование коллекций тултипов

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

const tooltips = [];

document.querySelectorAll('.item').forEach((el, index) => {
  const tip = tippy(el, {
    content: `Элемент ${index + 1}`,
    trigger: 'manual',
  });
  tooltips.push(tip);
});

document.querySelectorAll('.item').forEach((el, idx) => {
  el.addEventListener('mouseenter', () => {
    tooltips.forEach((t, i) => i !== idx && t.hide());
    tooltips[idx].show();
  });
});

Примечания:

  • Триггер manual даёт полный контроль над показом и скрытием тултипов.
  • Использование массива позволяет легко скрывать все тултипы кроме текущего.
  • Такой подход масштабируется на десятки и сотни элементов без потери производительности.

Динамическая замена контента при переключении

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

const dynamicTip = tippy(document.querySelector('#dynamic'), {
  content: 'Начальное содержимое',
  trigger: 'manual',
});

document.querySelectorAll('.dynamic-btn').forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    dynamicTip.setContent(btn.getAttribute('data-tooltip'));
    dynamicTip.show();
  });
});

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

  • Метод setContent позволяет обновлять текст на лету.
  • Такой способ уменьшает количество тултипов в DOM и улучшает производительность.
  • Полезно для интерфейсов с большим количеством повторяющихся элементов.

Взаимодействие с клавиатурой и фокусом

Tippy.js поддерживает переключение между элементами не только мышью, но и с клавиатуры:

tippy(document.querySelectorAll('.focusable'), {
  content: (ref) => ref.dataset.tooltip,
  trigger: 'focus',
  interactive: true,
});

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

  • Триггер focus позволяет пользователям переключаться с помощью клавиш Tab и Shift+Tab.
  • interactive: true сохраняет тултип открытым, пока фокус находится внутри.
  • Полезно для улучшения доступности интерфейсов.

Переключение с учётом условий

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

const statusTips = {
  active: 'Элемент активен',
  inactive: 'Элемент неактивен',
};

document.querySelectorAll('.status-btn').forEach(btn => {
  const tip = tippy(btn, { trigger: 'manual' });
  
  btn.addEventListener('mouseenter', () => {
    const status = btn.dataset.status;
    tip.setContent(statusTips[status]);
    tip.show();
  });
});

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

  • Поддержка динамических условий позволяет создавать сложные интерфейсы.
  • Можно комбинировать с любыми событиями (click, mouseenter, focus).
  • Гибкая настройка контента и логики отображения делает Tippy.js универсальным инструментом.

Практические советы

  • Использовать триггер manual для полного контроля при переключении.
  • Хранить тултипы в массивах или объектах, чтобы легко управлять их состоянием.
  • Обновлять содержимое через setContent вместо создания новых тултипов для улучшения производительности.
  • Комбинировать interactive: true и delay для плавного UX при быстром переключении между элементами.
  • Для доступности использовать trigger: 'focus' и поддерживать навигацию с клавиатуры.
Оглавление