PostCSS плагины

Tippy.js — это мощная библиотека для создания всплывающих подсказок (tooltips) и небольших всплывающих элементов в веб-интерфейсе. Она построена поверх Popper.js, что обеспечивает гибкое позиционирование и поддержку сложных сценариев взаимодействия. Основное преимущество Tippy.js — простота интеграции с чистым JavaScript и современными фреймворками, такими как React, Vue или Angular.

Подключение и инициализация

Для начала работы с Tippy.js необходимо подключить библиотеку через npm или CDN:

// Через npm
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

// Через CDN
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css">

Инициализация подсказки осуществляется с помощью функции tippy():

tippy('#myButton', {
  content: 'Это подсказка',
});

В этом примере к элементу с id myButton прикрепляется подсказка с текстом “Это подсказка”. Основной объект настройки tippy принимает два параметра: селектор (или DOM-элемент) и объект с опциями.

Основные опции

  • content — текст или HTML содержимое подсказки.
  • placement — позиция относительно элемента (top, bottom, left, right, а также комбинации с -start и -end).
  • trigger — события, вызывающие подсказку (mouseenter, click, focus, manual).
  • animation — анимация появления (fade, scale, shift-away, shift-toward).
  • theme — возможность подключать кастомные темы через CSS-классы.
  • delay — задержка показа или скрытия подсказки в миллисекундах.

Пример с расширенными опциями:

tippy('#infoIcon', {
  content: 'Дополнительная информация',
  placement: 'right',
  trigger: 'mouseenter focus',
  animation: 'scale',
  theme: 'light-border',
  delay: [100, 200],
});

Работа с HTML содержимым

Tippy.js позволяет использовать не только текст, но и полноценное HTML-содержимое:

tippy('#profile', {
  content: document.querySelector('#tooltipContent'),
  allowHTML: true,
  interactive: true,
});

Опция interactive: true позволяет пользователю взаимодействовать с элементами внутри подсказки (например, кнопками или ссылками).

Управление через API

Tippy.js предоставляет объект с методами для управления подсказкой:

  • show() — показать подсказку.
  • hide() — скрыть подсказку.
  • toggle() — переключить видимость.
  • destroy() — полностью удалить подсказку.
  • setContent(newContent) — изменить содержимое подсказки на лету.

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

const instance = tippy('#dynamicButton', { content: 'Изначальный текст' });

document.querySelector('#updateButton').addEventListener('click', () => {
  instance.setContent('Обновленный текст');
});

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

Tippy.js поддерживает кастомные темы через CSS. Библиотека поставляется с базовыми темами light, light-border, dark. Для создания своей темы:

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

.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #333;
}

Привязка темы через Jav * aScript:

tippy('#customThemeButton', {
  content: 'Подсказка с кастомной темой',
  theme: 'custom',
});

Многоступенчатые подсказки и взаимодействие с Popper.js

Tippy.js поддерживает сложные сценарии через Popper.js, включая:

  • Смещение подсказки (offset).
  • Контроль поведения при переполнении (flip, preventOverflow).
  • Создание цепочек подсказок с использованием followCursor или sticky.

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

tippy('#followCursor', {
  content: 'Я следую за курсором!',
  followCursor: true,
  offset: [0, 10],
  placement: 'top',
});

Подсказки в SPA и динамических интерфейсах

Для динамически создаваемых элементов важно использовать делегирование через tippy.delegate():

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

Такой подход автоматически обрабатывает новые элементы, появляющиеся в DOM после загрузки страницы.

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

Tippy.js имеет официальные адаптеры для React, Vue и других фреймворков. Основной принцип — передача ref или селектора элемента и управление подсказками через state. В React, например:

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

<Tippy content="Подсказка на кнопке" placement="bottom">
  <button>Нажми меня</button>
</Tippy>

Советы по производительности

  • Использовать делегирование для большого количества элементов.
  • Минимизировать сложное HTML содержимое подсказок.
  • Отключать подсказки на мобильных устройствах, если это не требуется.
  • Использовать lazy загрузку контента при необходимости.

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

Оглавление