Использование с модульными системами

Tippy.js полностью поддерживает модульные системы ES6 и CommonJS, что позволяет интегрировать библиотеку в современные фронтенд-проекты с использованием сборщиков вроде Webpack, Rollup или Vite. Основной синтаксис для импорта выглядит следующим образом:

// ES6
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
// CommonJS
const tippy = require('tippy.js').default;
require('tippy.js/dist/tippy.css');

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

Инициализация подсказок

После импорта Tippy.js, подсказки создаются методом tippy(). В качестве первого аргумента передается селектор, DOM-элемент или массив элементов. Второй аргумент — объект с настройками:

tippy('.btn', {
  content: 'Это подсказка',
  placement: 'top',
  animation: 'scale',
  arrow: true
});

Ключевые параметры:

  • content — текст или HTML содержимое подсказки.
  • placement — положение подсказки относительно элемента (top, bottom, left, right, auto).
  • animation — тип анимации появления (fade, scale, shift-away).
  • arrow — отображение стрелки (true / false).

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

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

const button = document.querySelector('#dynamicButton');

const instance = tippy(button, {
  content: 'Динамическая подсказка',
  trigger: 'click',
  hideOnClick: true
});

// Уничтожение подсказки при необходимости
instance.destroy();

Использование метода .destroy() гарантирует освобождение ресурсов и предотвращает утечки памяти.

Настройка интерактивных подсказок

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

tippy('#interactive', {
  content: '',
  allowHTML: true,
  interactive: true,
  placement: 'right',
  delay: [100, 100]
});

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

  • allowHTML — разрешает использование HTML-контента.
  • interactive — позволяет взаимодействовать с элементами внутри подсказки.
  • delay — задает задержку появления и скрытия [show, hide].

Использование Tippy.js с модульными фреймворками

При интеграции с React, Vue или Angular, Tippy.js можно использовать напрямую или через официальные обертки (@tippyjs/react, @tippyjs/vue). Пример для React:

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

function App() {
  return (
    
      
    
  );
}

Для Vue:

import { createApp } from 'vue';
import App from './App.vue';
import 'tippy.js/dist/tippy.css';
import tippy from 'tippy.js';

const app = createApp(App);

app.directive('tippy', {
  mounted(el, binding) {
    tippy(el, { content: binding.value });
  }
});

app.mount('#app');

Асинхронный контент и загрузка данных

Tippy.js поддерживает динамическое получение контента через функции:

tippy('#asyncButton', {
  content: 'Загрузка...',
  onShow(instance) {
    fetch('/api/tooltip-data')
      .then(res => res.text())
      .then(data => instance.setContent(data));
  }
});

Особенности работы:

  • onShow вызывается при каждом отображении подсказки.
  • instance.setContent() обновляет содержимое без пересоздания подсказки.

Расширение функционала с плагинами

Tippy.js предоставляет плагины, расширяющие возможности: followCursor, sticky, inlinePositioning. Подключение через модули:

import tippy, { followCursor } from 'tippy.js';
import 'tippy.js/dist/tippy.css';

tippy('.cursor-btn', {
  content: 'Следующая подсказка',
  plugins: [followCursor],
  followCursor: true
});

Настройка глобальных опций

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

tippy.setDefaults({
  animation: 'fade',
  duration: [200, 200],
  theme: 'light-border',
  arrow: true
});

tippy('.btn'); // Использует глобальные настройки

Глобальные параметры упрощают поддержку большого проекта и делают код более читаемым.

Работа с несколькими экземплярами

Tippy.js возвращает массив экземпляров при работе с несколькими элементами:

const buttons = document.querySelectorAll('.multi-btn');
const instances = tippy(buttons, {
  content: 'Общая подсказка'
});

// Доступ к конкретному экземпляру
instances[0].setContent('Персонализированная подсказка');

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

Оглавление