Создание собственных плагинов

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

Структура плагина:

const myPlugin = {
    name: 'myPlugin',       // уникальное имя плагина
    priority: 10,           // приоритет выполнения (выше — раньше)
    instance: null,         // ссылка на инстанс Tooltipster (устанавливается автоматически)
    options: {},            // дополнительные опции плагина

    // Метод инициализации плагина
    start: function (instance, helper) {
        this.instance = instance;
        // helper содержит полезные функции Tooltipster
    },

    // Метод перед открытием тултипа
    beforeOpen: function (instance, helper) {
        // логика, выполняемая перед отображением тултипа
    },

    // Метод после открытия тултипа
    afterOpen: function (instance, helper) {
        // логика после того, как тултип стал видимым
    },

    // Метод перед закрытием тултипа
    beforeClose: function (instance, helper) {
        // возвращаем false для отмены закрытия
    },

    // Метод после закрытия тултипа
    afterClose: function (instance, helper) {
        // очистка ресурсов, снятие обработчиков
    }
};

Ключевые элементы:

name — уникальный идентификатор плагина.
priority — определяет порядок вызова плагинов, когда их несколько. Чем выше число, тем раньше выполняется метод.
instance — ссылка на текущий экземпляр Tooltipster.
Методы start, beforeOpen, afterOpen, beforeClose, afterClose позволяют внедрять логику на разных этапах жизненного цикла тултипа.

Регистрация плагина

После создания объекта плагина его необходимо зарегистрировать в Tooltipster:

$.tooltipster._plugin({ plugin: myPlugin });

После этого плагин становится доступен для использования при инициализации тултипов:

$('.tooltip-element').tooltipster({
    plugins: ['myPlugin'],
    myPluginOption: 'значение'  // передача опций в плагин
});

При регистрации можно передавать пользовательские опции, которые плагин получает через свойство options внутри методов.

Передача и использование опций плагина

Опции плагина могут быть глобальными или задаваться для каждого конкретного тултипа:

$.tooltipster._plugin({
    plugin: {
        name: 'colorize',
        priority: 5,
        start: function(instance, helper) {
            this.options.color = instance.options.colorizeColor || 'blue';
        },
        beforeOpen: function(instance, helper) {
            instance.content().css('color', this.options.color);
        }
    }
});

$('.tooltip-element').tooltipster({
    plugins: ['colorize'],
    colorizeColor: 'red'
});

В этом примере плагин colorize окрашивает содержимое тултипа в указанный цвет. Опция colorizeColor передаётся при инициализации тултипа.

Работа с событиями Tooltipster

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

helper.origin — DOM-элемент, к которому привязан тултип.
helper.tooltip — DOM-элемент тултипа.
helper.instance — объект Tooltipster, содержащий методы open(), close(), content(), option().
helper.registerEvent(event, callback) — регистрация собственного события.
helper.deregisterEvent(event, callback) — удаление обработчика события.

Пример логирования открытия тултипа:

const logPlugin = {
    name: 'logPlugin',
    priority: 10,
    afterOpen: function(instance, helper) {
        console.log('Tooltip открыт для', helper.origin);
    }
};

$.tooltipster._plugin({ plugin: logPlugin });

Управление жизненным циклом тултипа

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

const preventClosePlugin = {
    name: 'preventClosePlugin',
    priority: 20,
    beforeClose: function(instance, helper) {
        if(instance.option('stayOpen')) {
            return false; // запрещаем закрытие
        }
    }
};

$('.tooltip-element').tooltipster({
    plugins: ['preventClosePlugin'],
    stayOpen: true
});

Возврат false из метода beforeClose предотвращает закрытие тултипа. Это полезно для реализации кастомных правил взаимодействия.

Создание сложных плагинов с DOM-манипуляцией

Плагины могут изменять разметку тултипа или добавлять элементы управления:

const buttonPlugin = {
    name: 'buttonPlugin',
    priority: 15,
    afterOpen: function(instance, helper) {
        const tooltip = helper.tooltip;
        const button = $('<button>Закрыть</button>');
        button.on('click', function() {
            instance.close();
        });
        $(tooltip).append(button);
    },
    afterClose: function(instance, helper) {
        $(helper.tooltip).find('button').remove();
    }
};

$('.tooltip-element').tooltipster({
    plugins: ['buttonPlugin']
});

В данном примере плагин добавляет кнопку закрытия прямо в тултип, а после закрытия очищает её, чтобы не оставлять лишние элементы в DOM.

Совместное использование нескольких плагинов

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

$('.tooltip-element').tooltipster({
    plugins: ['colorize', 'logPlugin', 'buttonPlugin'],
    colorizeColor: 'green'
});

В этом случае плагин colorize выполнится первым (priority 5), затем buttonPlugin (priority 15), и logPlugin (priority 10), если их методы совпадают по событию, порядок определяется по priority.

Передача данных между плагинами

Для обмена данными между плагинами используется объект instance.data(key, value):

const firstPlugin = {
    name: 'firstPlugin',
    afterOpen: function(instance, helper) {
        instance.data('userAction', 'clicked');
    }
};

const secondPlugin = {
    name: 'secondPlugin',
    afterOpen: function(instance, helper) {
        console.log('Данные от первого плагина:', instance.data('userAction'));
    }
};

$('.tooltip-element').tooltipster({
    plugins: ['firstPlugin', 'secondPlugin']
});

Это позволяет создавать цепочки плагинов, где один плагин передаёт состояние другому без глобальных переменных.