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

Для работы с Tippy.js необходимо подключить саму библиотеку и её стили. В современных проектах чаще используют модульный импорт:

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

После подключения можно создавать всплывающие подсказки на любом элементе DOM с помощью функции tippy(). Она принимает селектор или элемент, а также объект конфигурации:

tippy('.tooltip', {
  content: 'Пример подсказки',
  placement: 'top',
});

Здесь .tooltip — CSS-класс элементов, к которым будет применена подсказка, content — текст подсказки, а placement — позиция относительно элемента.

Создание Tippy для отдельных элементов

Можно создавать всплывающие подсказки для конкретного DOM-элемента, полученного через document.querySelector:

const button = document.querySelector('#myButton');
tippy(button, {
  content: 'Нажмите сюда',
  animation: 'scale',
});

Если требуется множество подсказок с одинаковыми настройками, можно использовать document.querySelectorAll:

const items = document.querySelectorAll('.info');
tippy(items, {
  content: 'Информация о элементе',
  arrow: true,
});

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

Динамическое изменение контента подсказки

Tippy.js позволяет обновлять контент подсказки после её создания с помощью метода setContent:

const tooltip = tippy('#dynamic', {
  content: 'Старый текст',
})[0]; // Возвращается массив, берём первый элемент

tooltip.setContent('Новый текст');

Также можно использовать функцию для генерации динамического контента:

tippy('#dynamic', {
  content: (reference) => `Ширина элемента: ${reference.offsetWidth}px`,
});

Это позволяет подсказке реагировать на текущие свойства DOM-элемента.

Взаимодействие с событиями DOM

Tippy.js интегрируется с событиями элементов, такими как click, mouseenter, focus. По умолчанию всплывающие подсказки показываются при наведении (mouseenter) и скрываются при уходе курсора (mouseleave):

tippy('#hoverButton', {
  content: 'Наведи на меня',
  trigger: 'mouseenter focus', // комбинированные события
});

Можно полностью контролировать поведение через метод show(), hide() или toggle():

const manualTooltip = tippy('#manual', {
  content: 'Ручное управление',
  trigger: 'manual',
});

document.querySelector('#manual').addEventListener('click', () => {
  manualTooltip[0].toggle();
});

Подключение Tippy к динамически создаваемым элементам

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

tippy.delegate(document.body, {
  target: '.dynamic-tooltip',
  content: 'Динамическая подсказка',
});

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

Управление жизненным циклом Tippy

Каждая подсказка возвращает объект с методами для управления состоянием и жизненным циклом:

  • show() — показать подсказку
  • hide() — скрыть подсказку
  • destroy() — удалить подсказку и все слушатели
  • disable() / enable() — временно деактивировать подсказку
const tooltip = tippy('#lifecycle', { content: 'Жизненный цикл' })[0];

tooltip.show();
setTimeout(() => {
  tooltip.hide();
}, 2000);

Настройка позиции и поведения

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

  • placement — позиция подсказки (top, bottom-start, right-end и др.)
  • offset — смещение относительно элемента [x, y]
  • boundary — элемент, в пределах которого подсказка будет оставаться видимой
  • flip — позволяет менять позицию при выходе за границы экрана
tippy('#positioned', {
  content: 'Сложная позиция',
  placement: 'right-start',
  offset: [0, 10],
  boundary: document.querySelector('#container'),
  flip: true,
});

Работа с HTML-контентом и компонентами

Tippy поддерживает использование HTML и DOM-узлов в качестве контента. Это полезно для сложных всплывающих окон с кнопками, изображениями или списками:

const htmlContent = document.createElement('div');
htmlContent.innerHTML = '<strong>Важная информация</strong><button>OK</button>';

tippy('#htmlButton', {
  content: htmlContent,
  allowHTML: true,
  interactive: true, // чтобы можно было кликать внутри
});

Параметр interactive: true позволяет пользователю взаимодействовать с элементами внутри подсказки без её закрытия.

Стилизация и кастомизация

Tippy.js позволяет кастомизировать стили через CSS или через опции theme и animation:

tippy('.custom', {
  content: 'Стильная подсказка',
  theme: 'light-border',
  animation: 'fade',
  arrow: true,
});

Можно создавать свои темы, используя CSS-переменные:

.tippy-box[data-theme~='my-theme'] {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
}
.tippy-box[data-theme~='my-theme'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #333;
}

Интеграция с фреймворками

Tippy легко интегрируется с любым фреймворком через работу с DOM-элементами. Для React, Vue или Angular достаточно передавать ссылку на элемент через ref или v-bind и инициализировать Tippy на нём после рендера компонента.

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

Оглавление