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

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

Установка пакета

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

yarn add tippy.js

Эта команда добавляет последнюю стабильную версию библиотеки в проект и обновляет package.json, создавая запись в разделе dependencies.

Если требуется установить конкретную версию Tippy.js, это делается следующим образом:

yarn add tippy.js@6.3.1

Где 6.3.1 — конкретная версия. Использование фиксированной версии полезно для поддержания совместимости с существующим кодом.

Установка CSS-стилей

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

yarn add tippy.js@6.3.1

После установки стили подключаются в проекте:

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

Для проектов с модульной системой (например, Webpack, Vite или Parcel) этот способ позволяет автоматически добавить стили в сборку.

Установка с Popper.js

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

yarn add @popperjs/core

После этого Tippy.js будет использовать Popper.js версии, установленной в проекте, для точного позиционирования всплывающих подсказок.

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

Если проект написан на TypeScript, рекомендуется установить типы:

yarn add -D @types/tippy.js

Хотя Tippy.js имеет встроенные типы начиная с версии 6, явное добавление типов через @types обеспечивает совместимость с более старыми версиями TypeScript и облегчает автодополнение.

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

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

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

tippy('#myButton', {
  content: 'Пример тултипа',
});

HTML-элемент:

<button id="myButton">Наведи на меня</button>

Если тултип появляется при наведении, установка выполнена корректно.

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

В монорепозиториях с использованием Yarn Workspaces установка Tippy.js может быть выполнена в корневой папке:

yarn workspace my-app add tippy.js

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

Автоматическое обновление

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

yarn upgrade tippy.js

Если необходимо обновить до конкретной версии:

yarn upgrade tippy.js@6.3.2

Итоговые рекомендации

  • Всегда подключать CSS, иначе тултипы не будут корректно отображаться.
  • При работе с TypeScript убедиться, что типы Tippy.js доступны.
  • В проектах с множеством пакетов использовать Yarn Workspaces для оптимизации зависимостей.
  • Фиксировать версии библиотеки для стабильности работы.

Установка через Yarn обеспечивает надежное управление зависимостями и простую интеграцию Tippy.js в любой современный проект на JavaScript.

Оглавление