Загрузка библиотеки

Для работы с Tooltipster необходимо подключить саму библиотеку и её CSS-стили. Библиотека распространяется через NPM, CDN или прямое скачивание файлов.

Подключение через CDN

Самый простой способ — подключение через CDN. В <head> документа добавляются ссылки на CSS и JS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>
  • CSS отвечает за оформление всплывающих подсказок.
  • jQuery необходим, так как Tooltipster построен на этом фреймворке.
  • JS содержит основной функционал библиотеки.

Важно подключать jQuery до скрипта Tooltipster, иначе библиотека работать не будет.

Подключение через NPM

Для современных проектов с Webpack, Vite или Parcel предпочтительно использовать установку через NPM:

npm install tooltipster jquery

После установки в JavaScript-файле подключается библиотека и стили:

import $ from 'jquery';
import 'tooltipster/dist/css/tooltipster.bundle.min.css';
import 'tooltipster/dist/js/tooltipster.bundle.min.js';

Такой способ позволяет использовать Tooltipster совместно с модульной системой и сборщиками, а также облегчает управление зависимостями.

Локальное подключение файлов

Если проект не использует сборщики и NPM, можно скачать библиотеку с официального сайта и подключить локальные файлы:

<link rel="stylesheet" href="tooltipster.bundle.min.css">
<script src="jquery.min.js"></script>
<script src="tooltipster.bundle.min.js"></script>

Необходимо убедиться, что пути к файлам корректны и jQuery подключен первым.

Проверка загрузки

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

console.log(typeof $.tooltipster);

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

Подключение дополнительных тем

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

<link rel="stylesheet" href="tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">

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

Версии библиотеки

Tooltipster имеет несколько версий, и синтаксис инициализации и доступные опции могут отличаться:

  • v3 – устаревшая, требует отдельного подключения CSS для каждого типа подсказки.
  • v4 и выше – современная, поддерживает пакетный файл bundle, универсальные темы и плагины.

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

Инициализация после загрузки

После подключения файлов Tooltipster готов к инициализации:

$(document).ready(function() {
    $('.tooltip').tooltipster();
});
  • Класс .tooltip присваивается элементам, которым необходимы подсказки.
  • Можно передавать опции при инициализации для настройки поведения: анимации, задержки, размеров и темы.

Основные моменты

  • jQuery должен быть загружен первым.
  • CSS и JS библиотеки должны соответствовать одной версии Tooltipster.
  • При использовании сборщиков предпочтительнее NPM-установка.
  • Для использования тем подключаются отдельные CSS-файлы.

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

Оглавление