Версионирование

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

Инициализация выполняется с помощью метода .tooltipster() на выбранных элементах:

$('.tooltip').tooltipster({
    content: 'Простой текст тултипа',
    theme: 'tooltipster-light'
});

Ключевые параметры инициализации:

  • content — текст или HTML-содержимое тултипа.
  • theme — визуальная тема, можно использовать встроенные или кастомные CSS.
  • trigger — способ вызова тултипа (hover, click, custom).
  • animation — эффект появления (fade, grow, swing, slide).
  • delay — задержка перед показом в миллисекундах.

Версионирование Tooltipster

Tooltipster активно развивается, и каждая версия имеет свои особенности. Основные версии: 3.x, 4.x, 5.x. Версии несовместимы друг с другом по API и способу инициализации.

Особенности версий

Версия 3.x

  • Устаревшая, поддержка прекращена.
  • API сильно отличается от современных версий.
  • Используется метод .tooltipster() с простыми опциями (position, offset, animation).
  • Нет поддержки Promise и расширенного контента (HTML или jQuery элементы сложной структуры).

Пример:

$('.tooltip').tooltipster({
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-default',
    content: 'Тултип 3.x'
});

Версия 4.x

  • Введён модульный CSS, поддержка нескольких тем.
  • Улучшена работа с HTML-контентом через опцию content.
  • Поддержка современных браузеров и мобильных устройств.
  • Появились новые события: before, after, position, update.
  • Возможность использования functionBefore для динамического обновления содержимого перед показом.

Пример динамического контента:

$('.tooltip').tooltipster({
    content: $('<span>Загрузка...</span>'),
    functionBefore: function(instance, helper){
        if(!instance.contentSet){
            $.get('/api/tooltip-data', function(data){
                instance.content(data);
                instance.contentSet = true;
            });
        }
    }
});

Версия 5.x

  • Полный пересмотр API, более строгая типизация опций.
  • Убраны устаревшие методы, например update.
  • Поддержка нескольких тултипов на одном элементе через instance.open() и instance.close().
  • Интеграция с современными фреймворками и возможность управления через Promise.
  • Поддержка функций onInit, onReady, onAfterOpen, onAfterClose.

Пример с обработкой событий:

$('.tooltip').tooltipster({
    content: 'Тултип 5.x',
    trigger: 'click',
    onInit: function(instance){
        console.log('Tooltip инициализирован');
    },
    onAfterOpen: function(instance){
        console.log('Tooltip открыт');
    }
});

Миграция между версиями

При переходе с версии 3.x на 4.x и 5.x важно учитывать следующие моменты:

  1. Методы и опции Многие методы 3.x и 4.x устарели. Например, .tooltipster('update') заменяется в 5.x на instance.content().

  2. Темы и стили В 5.x темы оформляются через SCSS или CSS-модули. Стили 3.x и 4.x могут не работать корректно.

  3. События События изменили структуру параметров. В 5.x используются новые хуки (onInit, onReady, onAfterOpen, onAfterClose), старые (before, after) устарели.

  4. Контент В 5.x обязательна проверка, что контент безопасен для вставки, если используется HTML. Статический текст вставляется через content: 'Текст', динамический — через instance.content().

Пример корректного обновления содержимого в 5.x:

const instance = $('.tooltip').tooltipster().tooltipster('instance');
instance.content('<strong>Обновлённый контент</strong>');

Управление версиями в проекте

Для контроля версий Tooltipster в проектах используют менеджеры пакетов:

  • npm:
npm install tooltipster@4.2.8
  • yarn:
yarn add tooltipster@5.0.0
  • CDN — удобно для быстрых прототипов, но версия должна быть явно указана, чтобы избежать конфликтов при обновлениях.

Рекомендовано фиксировать версии через package.json, чтобы избежать несовместимости при совместной работе нескольких разработчиков или деплое на продакшн.

Совместимость с jQuery

Tooltipster версии 4.x и 5.x совместим с jQuery 3.x. При использовании старых версий jQuery (1.x или 2.x) возможны ошибки работы плагина:

  • .tooltipster() может не инициализироваться.
  • Некоторые события (update, position) могут работать некорректно.
  • Для 5.x рекомендуется jQuery >= 3.0 или использование без jQuery через нативный JS-API.

Практические рекомендации

  • Всегда указывать версию при подключении библиотеки через CDN или npm.
  • Для динамического контента использовать функции обратного вызова functionBefore (4.x) или instance.content() (5.x).
  • Перед обновлением версии проверить стили и темы, так как визуальные отличия могут быть значительными.
  • Для проектов с долгим сроком поддержки лучше использовать последнюю стабильную версию, чтобы иметь актуальные исправления безопасности и новые возможности API.
Оглавление