Подключение зависимостей

Для работы с библиотекой Tooltipster необходимо корректно подключить все её зависимости: сам плагин, jQuery, а также стили. Tooltipster построен на основе jQuery, поэтому без него плагин работать не будет.

Подключение jQuery

Tooltipster совместим с версиями jQuery 1.7 и выше. Для большинства современных проектов рекомендуется использовать актуальную стабильную версию jQuery 3.x. Подключение может выполняться как через CDN, так и локально.

Пример подключения через CDN:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Пример локального подключения:

<script src="/path/to/jquery.min.js"></script>

Важно убедиться, что jQuery подключён до подключения Tooltipster, иначе инициализация плагина завершится ошибкой.

Подключение CSS Tooltipster

Tooltipster предоставляет собственные стили для корректного отображения подсказок. Стили подключаются через файл tooltipster.bundle.min.css или отдельные темы.

Подключение стандартного CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />

Можно использовать отдельные темы:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css" />

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

Подключение JS Tooltipster

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

Пример подключения через CDN:

<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

Если используется локальная версия:

<script src="/path/to/tooltipster.bundle.min.js"></script>

Файл tooltipster.bundle.min.js включает все необходимые плагины Tooltipster, такие как sideTip, contentCloning и другие. При необходимости можно подключать отдельные плагины по мере нужды.

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

Правильная последовательность крайне важна:

  1. jQuery
  2. CSS Tooltipster
  3. JS Tooltipster

Нарушение порядка может вызвать ошибки и некорректное отображение подсказок.

Проверка подключения

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

<button id="example" title="Пример подсказки">Наведи на меня</button>

<script>
  $(document).ready(function() {
    $('#example').tooltipster();
  });
</script>

Если при наведении появляется подсказка с текстом Пример подсказки, все зависимости подключены корректно.

Особенности при сборке проекта

  • При использовании сборщиков модулей, таких как Webpack или Vite, подключение через import возможно:
import $ from 'jquery';
import 'tooltipster/dist/css/tooltipster.bundle.min.css';
import 'tooltipster/dist/js/tooltipster.bundle.min.js';

$('#example').tooltipster();
  • Для минимизации пакета можно подключать только нужные темы и плагины. Это уменьшает размер итогового бандла и ускоряет загрузку страниц.

Поддержка старых браузеров

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

Проверка версий

Для стабильной работы следует использовать совместимые версии jQuery и Tooltipster. Несоответствие версий может привести к ошибкам, например:

TypeError: $(...).tooltipster is not a function

Это означает, что либо jQuery не подключён, либо подключён после Tooltipster, либо конфликт версий.

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

Оглавление