Фокус на интерактивных элементах

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

Для создания базовой подсказки используется следующий синтаксис:

tippy('#myButton', {
  content: 'Нажмите, чтобы узнать больше',
});

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

  • #myButton — селектор элемента, к которому привязывается тултип. Можно использовать класс .myClass или NodeList.
  • content — текст или HTML-содержимое подсказки.
  • Tippy автоматически создаёт DOM-элемент для тултипа и управляет его позиционированием.

Управление позиционированием и триггерами

Tippy.js использует Popper.js для точного позиционирования. Позиция определяется параметром placement:

tippy('#myButton', {
  content: 'Слева от кнопки',
  placement: 'left',
});

Возможные значения placement: top, bottom, left, right, а также их модификаторы -start и -end.

Триггеры определяют, когда появляется подсказка:

tippy('#myButton', {
  content: 'Кликните по кнопке',
  trigger: 'click',
});

Стандартные триггеры:

  • mouseenter — появляется при наведении мыши.
  • focus — при фокусе на элементе.
  • click — при клике.
  • manual — полностью ручное управление через API.

Можно комбинировать триггеры:

trigger: 'mouseenter focus'

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

Tippy.js позволяет создавать интерактивные подсказки, содержащие кнопки, ссылки, формы и другие элементы. Для этого используется опция interactive: true:

tippy('#myButton', {
  content: '<button id="tooltipBtn">Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});

Особенности интерактивного тултипа:

  • interactive: true предотвращает закрытие подсказки при наведении на её содержимое.
  • allowHTML: true разрешает вставку HTML, без этого любая разметка будет экранирована.
  • Для управления событиями внутри подсказки необходимо использовать делегирование или прямое добавление слушателей.

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

document.addEventListener('click', (e) => {
  if (e.target && e.target.id === 'tooltipBtn') {
    alert('Кнопка в тултипе нажата!');
  }
});

Динамическое обновление содержимого

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

const tip = tippy('#myButton', {
  content: 'Первоначальный текст',
});

tip[0].setContent('Обновлённый текст');

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

  • Изменение текста или HTML без пересоздания тултипа.
  • Актуальность подсказок для интерактивных элементов, например, списков или таблиц.

Управление видимостью и жизненным циклом

Tippy.js предоставляет методы для ручного управления тултипом:

tip[0].show();   // Показать подсказку
tip[0].hide();   // Скрыть подсказку
tip[0].destroy(); // Удалить тултип и все слушатели

Также доступны колбэки для контроля жизненного цикла:

  • onShow(instance) — перед показом.
  • onShown(instance) — после показа.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия.

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

Настройка анимации и стиля

Tippy.js поддерживает кастомизацию анимации и внешнего вида:

tippy('#myButton', {
  content: 'С анимацией',
  animation: 'scale',
  theme: 'custom-theme',
});

Опции анимации:

  • fade — плавное исчезновение.
  • scale — появление с масштабированием.
  • shift-toward — смещение в направлении тултипа.
  • Можно создавать собственные CSS-анимации через классы темы.

Создание пользовательской темы:

.tippy-box[data-theme~='custom-theme'] {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
}

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

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

tippy('.tooltip-item', {
  content: 'Подсказка для каждого элемента',
  placement: 'top',
});

Если нужно уникальное содержимое для каждого элемента, используется функция:

tippy('.tooltip-item', {
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
});

Интеграция с динамическим контентом

Для интерфейсов, где элементы создаются динамически (например, через JavaScript или фреймворки), Tippy.js поддерживает делегирование событий:

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

Преимущества делегирования:

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

Выводы по интерактивным элементам

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

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

Оглавление