Установка через npm

Tippy.js — это современная и гибкая библиотека для создания всплывающих подсказок (tooltips) на веб-страницах. Наиболее удобный способ интеграции библиотеки в проект — использование пакетного менеджера npm, что обеспечивает легкое управление зависимостями и обновлениями.

1. Инициализация проекта

Перед установкой Tippy.js через npm необходимо убедиться, что проект уже инициализирован как Node.js проект. Если проект еще не инициализирован, выполняется команда:

npm init -y

Эта команда создаст файл package.json с настройками проекта по умолчанию.

2. Установка Tippy.js

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

npm install @popperjs/core tippy.js

Объяснение:

  • @popperjs/core — обязательная зависимость, обеспечивающая позиционирование всплывающих подсказок.
  • tippy.js — непосредственно сама библиотека Tippy.js.

После выполнения команды зависимости будут добавлены в node_modules и зафиксированы в package.json.

3. Подключение Tippy.js в проект

Использование ES Modules

В современных проектах на JavaScript с поддержкой ES Modules можно подключить библиотеку следующим образом:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
  • tippy — основной объект библиотеки, через который создаются подсказки.
  • Импорт CSS-файла необходим для стандартного оформления подсказок. Без него подсказки будут работать, но без стилей.

Использование CommonJS

В проектах с CommonJS (например, Node.js + Browserify или Webpack) подключение выглядит так:

const tippy = require('tippy.js').default;
require('tippy.js/dist/tippy.css');

Важно использовать .default, так как CommonJS модуль экспортирует объект по умолчанию.

4. Проверка корректной установки

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

tippy('#myButton', {
  content: 'Привет, я подсказка!',
});

Здесь:

  • #myButton — селектор элемента, к которому прикрепляется подсказка.
  • content — текст, который будет отображаться во всплывающем окне.

Если подсказка появляется при наведении на элемент, установка прошла успешно.

5. Настройка конфигурации через npm-подключение

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

tippy('#myButton', {
  content: 'Подсказка с анимацией',
  placement: 'right', // положение: top, right, bottom, left
  animation: 'scale', // тип анимации: scale, fade, shift-away
  arrow: true,        // отображение стрелки
  delay: [100, 200],  // задержка появления и скрытия подсказки
  theme: 'light',     // светлая тема
});

Каждая из этих опций полностью совместима с установкой через npm и не требует подключения дополнительных скриптов.

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

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

document.body.insertAdjacentHTML('beforeend', '');

tippy('#dynamicBtn', {
  content: 'Создано динамически',
  placement: 'bottom',
});

Такой подход особенно полезен при работе с фреймворками, где DOM-элементы могут появляться динамически (React, Vue, Angular).

7. Поддержка модульных сборщиков

Установка через npm позволяет полностью интегрировать Tippy.js с популярными сборщиками:

  • Webpack: автоматически обрабатывает импорты CSS и JS.
  • Parcel: минимальная настройка, подключение через import.
  • Vite: поддержка ES Modules и tree-shaking.

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

8. Обновление и управление зависимостями

Установленные через npm пакеты можно обновлять с помощью:

npm update tippy.js @popperjs/core

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

Оглавление