Изменения в API

Tooltipster, как популярная библиотека для создания всплывающих подсказок в JavaScript, претерпела значительные изменения в своём API с версии 4.x до версии 5.x. Эти изменения затрагивают как способ инициализации тултипов, так и методы управления их поведением. Рассмотрим ключевые моменты подробно.

Инициализация тултипов

Ранее (v4.x) использовался подход:

$('.tooltip').tooltipster({
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-light'
});

Теперь (v5.x) инициализация строго ориентирована на объектный синтаксис и цепочки методов. Опции стали более строгими и модульными:

import Tooltipster from 'tooltipster';

const instance = Tooltipster.create(document.querySelector('.tooltip'), {
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-light'
});

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

  • Отсутствует глобальная инициализация через jQuery по умолчанию.
  • Поддержка нативного DOM через Tooltipster.create.
  • Модули теперь подключаются отдельно, например, TooltipsterContent, TooltipsterAnimation.

Методы управления тултипом

API прежних версий включало методы вида:

$('.tooltip').tooltipster('open');
$('.tooltip').tooltipster('content', 'Новый контент');

В новой версии методы стали объектно-ориентированными:

const instance = Tooltipster.get(document.querySelector('.tooltip'));

instance.open();
instance.content('Новый контент');
instance.close();

Ключевые изменения:

  • Метод content() теперь возвращает и устанавливает содержимое без необходимости дополнительных аргументов для получения текущего контента (instance.content() возвращает текущий контент).
  • Методы enable(), disable(), destroy() остались, но требуют прямого обращения к экземпляру тултипа.
  • Обработчики событий заменены на стандартные методы .on() и .off() экземпляра, без передачи строковых команд через jQuery.

Работа с анимациями и темами

В версии 5.x добавлена расширенная поддержка анимаций через CSS-классы и кастомные темы:

const instance = Tooltipster.create('.tooltip', {
    animation: 'slide',
    theme: ['tooltipster-light', 'custom-theme'],
    interactive: true
});

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

  • Множественные темы теперь передаются массивом.
  • Опция interactive позволяет тултипу оставаться открытым при наведении мыши на содержимое тултипа.
  • Поддержка CSS-анимаций через собственные классы вместо встроенных JS-анимаций.

События

Ранее события выглядели так:

$('.tooltip').on('beforeOpen', function() {
    console.log('Тултип открывается');
});

Теперь используется объектный подход:

const instance = Tooltipster.create('.tooltip');

instance.on('beforeOpen', () => {
    console.log('Тултип открывается');
});
instance.off('beforeOpen');

Изменения:

  • События привязываются только к конкретному экземпляру.
  • Все callback-функции получают объект события с расширенными данными: {instance, origin, content}.
  • Отмена события производится через event.preventDefault() внутри callback.

Асинхронный контент

Tooltipster 5.x добавляет встроенную поддержку асинхронного контента:

const instance = Tooltipster.create('.tooltip', {
    content: 'Загрузка...',
});

instance.content(new Promise(resolve => {
    setTimeout(() => {
        resolve('Данные загружены');
    }, 1000);
}));

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

  • Можно передавать промис в content().
  • Тултип автоматически обновляет содержимое после разрешения промиса.
  • Упрощает интеграцию с AJAX-запросами и динамическими данными.

Устаревшие методы и опции

Некоторые методы v4.x больше не поддерживаются:

  • Строковые команды через jQuery ('open', 'close', 'content') полностью заменены на методы экземпляра.
  • Глобальная инициализация через $.tooltipster() больше не применяется.
  • Опции functionBefore и functionReady заменены на события beforeOpen и ready.

Миграция с версии 4.x на 5.x

Основные шаги:

  1. Инициализация тултипов через Tooltipster.create() вместо jQuery.
  2. Использование методов экземпляра вместо строковых команд.
  3. Привязка событий через .on() экземпляра.
  4. Проверка опций, так как некоторые были переименованы или разделены на более специфичные (например, theme теперь массив, animation поддерживает кастомные CSS-классы).
  5. Для асинхронного контента — использование промисов вместо functionBefore.

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

Оглавление