Интеграция с сборщиками проектов

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

npm install @tippyjs/core
# или через yarn
yarn add @tippyjs/core

После установки Tippy.js импортируется в проект:

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

Импорт CSS обязателен, если требуется стандартная стилизация подсказок. Можно также использовать кастомные темы, подключая отдельные CSS-файлы или создавая свои стили.

Конфигурация сборщика для работы с Tippy.js

Современные сборщики, такие как Webpack, Vite или Parcel, поддерживают ES-модули, что позволяет подключать Tippy.js без дополнительных настроек. Основные моменты:

  • Webpack: достаточно настроить babel-loader или esbuild-loader для транспиляции JS-кода. Tippy.js использует стандартный ES6, поэтому проблем не возникает.
  • Vite: Tippy.js полностью совместим с Vite, так как сборщик поддерживает нативные ES-модули. Дополнительно можно использовать vite-plugin-css для оптимизации CSS.
  • Parcel: импорт через import tippy from '@tippyjs/core' работает из коробки, Parcel автоматически собирает CSS и JS.

Импорт отдельных модулей

Tippy.js разделён на ядро (@tippyjs/core) и плагины. Для уменьшения размера сборки можно подключать только нужные расширения:

import tippy, { roundArrow } from '@tippyjs/core';
import 'tippy.js/dist/svg-arrow.css';

tippy('.button', {
  content: 'Подсказка с круглой стрелкой',
  arrow: roundArrow,
});

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

Использование с фреймворками через сборщик

React: для интеграции можно использовать @tippyjs/react, который оборачивает Tippy.js в компонент:

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

function App() {
  return (
    <Tippy content="Подсказка">
      <button>Наведи на меня</button>
    </Tippy>
  );
}

Сборщики автоматически обрабатывают JSX и подключение CSS, так что дополнительных настроек не требуется.

Vue: через плагин @tippyjs/vue:

import { createApp } from 'vue';
import App from './App.vue';
import Tippy from '@tippyjs/vue';

const app = createApp(App);
app.use(Tippy);
app.mount('#app');

Это позволяет использовать директиву v-tippy в шаблонах Vue для создания подсказок.

Оптимизация сборки и tree-shaking

Tippy.js поддерживает tree-shaking, поэтому ненужные функции можно исключать из сборки:

import tippy from '@tippyjs/core';
import { followCursor } from '@tippyjs/all'; // импорт только конкретного плагина

В сборщиках с поддержкой ES-модулей, таких как Webpack 5 и Vite, это позволяет уменьшить размер итогового бандла.

Конфигурация CSS при сборке

Если проект использует PostCSS или Sass, CSS Tippy.js можно импортировать напрямую в основной файл стилей:

@import "~tippy.js/dist/tippy.css";

Также возможна интеграция с Tailwind CSS через @apply для стилизации подсказок с кастомными классами:

.tippy-box {
  @apply bg-gray-800 text-white rounded shadow-lg;
}

Динамическая загрузка и ленивый импорт

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

async function loadTippy() {
  const { default: tippy } = await import('@tippyjs/core');
  tippy('.lazy-button', { content: 'Динамическая подсказка' });
}

document.querySelector('.lazy-button').addEventListener('mouseenter', loadTippy);

Такой подход уменьшает первоначальный размер JS и ускоряет загрузку страницы.

Интеграция с TypeScript

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

npm install @types/tippy.js

Пример использования:

import tippy, { Instance, Props } from '@tippyjs/core';

const button: HTMLButtonElement = document.querySelector('.btn')!;
const tooltip: Instance<Props> = tippy(button, {
  content: 'Подсказка для TypeScript',
});

Это обеспечивает автодополнение и строгую типизацию параметров конфигурации в редакторах.

Сборка кастомного бандла

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

  1. Импорт только ядра и нужных плагинов.
  2. Минификация через Terser или встроенные инструменты сборщика.
  3. Выгрузка CSS отдельно или через CSS-in-JS, если это соответствует архитектуре проекта.

Такой подход снижает нагрузку на клиент и ускоряет рендеринг интерактивных подсказок.

Работа с модульными CSS

Tippy.js позволяет применять модули CSS, что особенно актуально для сборщиков с поддержкой CSS Modules. Пример:

import tippy from '@tippyjs/core';
import styles from './Tooltip.module.css';

tippy('.button', {
  content: 'Модульная подсказка',
  popperOptions: {
    modifiers: [
      {
        name: 'applyCustomClass',
        enabled: true,
        fn({ popper }) {
          popper.classList.add(styles.tooltip);
        },
      },
    ],
  },
});

Это гарантирует отсутствие конфликтов имен классов при использовании Tippy.js в больших проектах.

Оглавление