Обратная совместимость

Tooltipster, начиная с версии 4, требует jQuery 1.7 и выше, что обеспечивает совместимость с современными браузерами. Однако при использовании старых версий библиотек или проектов, построенных на устаревших фреймворках, необходимо учитывать следующие ограничения:

  • IE8 и ниже полностью не поддерживаются, так как библиотека использует методы addEventListener и CSS3-анимации, которых нет в старых движках.
  • IE9–IE11 поддерживаются с некоторыми ограничениями по анимациям и позиционированию. Для плавного отображения необходимо подключать полифилы для requestAnimationFrame и classList.
  • jQuery версии 1.6 и ниже не поддерживаются, что делает обязательным обновление библиотеки на минимально совместимую версию.

Подключение старых и новых версий Tooltipster

Tooltipster предоставляет возможность использовать старые версии (v3) и новые (v4+) параллельно, если проект содержит legacy-код. Основные различия между версиями:

Функционал v3 v4+
Инициализация $(element).tooltipster(options); $(element).tooltipster(options); (но опции отличаются)
Темы CSS-классы напрямую Через theme объект и $.tooltipster.theme()
Callbacks onBeforeShow, onAfterHide functionInit, functionReady, functionAfter
Поддержка SVG ограничена полная

Для проектов, где одновременно используются v3 и v4+, рекомендуется разделять области применения по классам:

$('.tooltip-v3').tooltipster({ theme: 'tooltipster-default' });
$('.tooltip-v4').tooltipster({
    theme: ['tooltipster-default', 'tooltipster-shadow'],
    animation: 'fade'
});

Опции конфигурации с учетом обратной совместимости

Некоторые опции изменились в API версии 4+, но есть способы сохранить совместимость:

  • delay — в v3 задается миллисекундами, в v4+ также миллисекундами, но при использовании animationDuration следует синхронизировать значения.
  • position — в v3: строки 'top', 'bottom' и т.д.; в v4+ можно использовать массив приоритетов, например: ['top', 'bottom', 'right']. Старый синтаксис поддерживается, но массив дает большую гибкость.
  • theme — v3: CSS-класс; v4+: объект или массив объектов через $.tooltipster.theme(). Для поддержки старого кода можно задать класс в массиве: theme: ['tooltipster-default'].

Callbacks и события

В версии 3 события привязывались напрямую через опции:

$(element).tooltipster({
    onBeforeShow: function(origin, continueTooltip) { ... },
    onAfterHide: function(origin) { ... }
});

В версии 4+ события заменены на функции functionInit, functionReady, functionAfter:

$(element).tooltipster({
    functionInit: function(instance, helper) { ... },
    functionReady: function(instance, helper) { ... },
    functionAfter: function(instance, helper) { ... }
});

Чтобы обеспечить обратную совместимость с v3-кодом, можно написать адаптер:

function adaptV3Callbacks(options) {
    if (options.onBeforeShow) {
        options.functionBefore = options.onBeforeShow;
    }
    if (options.onAfterHide) {
        options.functionAfter = options.onAfterHide;
    }
    return options;
}
$('.tooltip').tooltipster(adaptV3Callbacks(oldOptions));

Анимации и CSS

  • В v3 анимации задавались строкой 'fade', 'grow' или 'swing'.
  • В v4+ анимации управляются через animation и animationDuration. Для поддержки старого кода можно использовать:
var anim = oldOptions.animation || 'fade';
var duration = oldOptions.delay || 350;
$('.tooltip').tooltipster({
    animation: anim,
    animationDuration: duration
});
  • Старые CSS-темы остаются совместимыми, но новые классы позволяют более гибко менять оформление без переписывания JavaScript-кода.

Интеграция с другими библиотеками

Tooltipster v4+ лучше интегрируется с современными фреймворками: Angular, React, Vue. Однако при использовании старого jQuery-кода стоит:

  • Изолировать v3-плагины через отдельные контейнеры.
  • Использовать уникальные классы или ID для разных версий Tooltipster.
  • Проверять конфликт версий jQuery, так как v3 требует jQuery <3.0 для некоторых проектов.

Практические советы

  1. Использовать разные классы для разных версий Tooltipster, чтобы избежать конфликтов опций и тем.
  2. Полифилить устаревшие функции (requestAnimationFrame, classList) для IE9–IE11.
  3. Сохранять старые CSS-классы для плавного перехода, не переписывая оформление полностью.
  4. Для крупных проектов создать адаптер между версиями, чтобы минимизировать изменения в legacy-коде.

Обратная совместимость Tooltipster обеспечивается через сочетание правильного выбора версии, адаптации опций и использования CSS-тем для старого кода. Это позволяет внедрять новые возможности библиотеки, не ломая существующую функциональность.

Оглавление