Структура файлов библиотеки

Библиотека Tooltipster представляет собой современное решение для создания кастомизируемых всплывающих подсказок на веб-страницах. Для правильной работы и гибкой интеграции необходимо понимать структуру её файлов и роль каждого компонента.

Основные директории и файлы

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

tooltipster/
├── dist/
│   ├── js/
│   │   ├── tooltipster.bundle.min.js
│   │   └── tooltipster.bundle.js
│   ├── css/
│   │   ├── tooltipster.bundle.min.css
│   │   └── tooltipster.bundle.css
│   └── plugins/
│       ├── tooltipster/sideTip/
│       │   ├── tooltipster.sideTip.min.js
│       │   └── tooltipster.sideTip.min.css
│       └── tooltipster/...
├── src/
│   ├── js/
│   │   ├── core.js
│   │   ├── instance.js
│   │   └── utils.js
│   └── css/
│       ├── tooltipster-base.css
│       └── themes/
│           ├── tooltipster-light.css
│           └── tooltipster-noir.css
├── package.json
└── README.md

Каталог dist

Директория dist содержит готовые к использованию файлы, которые подключаются напрямую в проект:

  • js/tooltipster.bundle.js – полный несжатый скрипт библиотеки, включающий ядро и все плагины. Полезен для разработки и отладки.
  • js/tooltipster.bundle.min.js – минифицированная версия для продакшена, сокращает размер и ускоряет загрузку.
  • css/tooltipster.bundle.css – полный CSS-файл со стилями для всех компонентов.
  • css/tooltipster.bundle.min.css – минифицированная версия CSS.
  • plugins/ – отдельные модули и расширения, например sideTip для стандартного оформления подсказки.

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

  • Плагины можно подключать по отдельности, если нужна минимальная конфигурация.
  • Файлы в dist являются итогом сборки из исходников src.

Каталог src

src содержит исходный код библиотеки, разделённый на JavaScript и CSS:

JavaScript
  • core.js – основной функционал библиотеки: инициализация подсказок, обработка событий, управление жизненным циклом tooltip’а.
  • instance.js – описывает объекты-экземпляры подсказок, методы для их открытия, закрытия, обновления содержимого.
  • utils.js – вспомогательные функции: работа с DOM, вычисление позиции, управление таймерами анимации.
CSS

  • tooltipster-base.css – базовые стили для всех подсказок.

  • themes/ – директория с темами оформления:

    • tooltipster-light.css – светлая тема.
    • tooltipster-noir.css – тёмная тема.

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

  • Использование отдельных файлов CSS и JS позволяет создавать кастомные сборки, исключая ненужные темы или плагины.
  • В src удобно вносить изменения и тестировать локальные модификации.

Файл package.json

Файл package.json определяет проект как npm-пакет и содержит:

  • Название и версию библиотеки.
  • Зависимости (если есть) для сборки и тестирования.
  • Скрипты для сборки, минификации и тестирования.
  • Метаданные: лицензия, автор, репозиторий.

Используется для установки через npm и интеграции с сборщиками вроде Webpack или Vite.

Плагины и расширения

Tooltipster поддерживает плагинную архитектуру. Каждый плагин находится в dist/plugins и обычно включает:

  • JavaScript-файл плагина.
  • CSS-файл для кастомного оформления.
  • Возможные изображения или шрифты (если плагин требует).

Пример структуры плагина SideTip:

sideTip/
├── tooltipster.sideTip.min.js
├── tooltipster.sideTip.min.css
└── README.md

Плагины могут подключаться как вместе с основной сборкой (bundle), так и по отдельности для уменьшения объема.

Рекомендации по использованию файлов

  • Для быстрого подключения используйте dist/js/tooltipster.bundle.min.js и dist/css/tooltipster.bundle.min.css.
  • Для кастомизации подключайте отдельные исходники из src и нужные плагины.
  • Минифицированные файлы предназначены только для продакшена и не содержат комментариев.
  • Любые изменения лучше вносить в src, а затем пересобирать файлы с помощью стандартных скриптов сборки.

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

Оглавление