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

Для использования Tooltipster необходимо подключить библиотеку и стили. В HTML-документе подключение производится через теги <link> и <script>:

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

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

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

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

  • content – задаёт содержимое тултипа. Может быть строкой, jQuery-объектом или функцией, возвращающей содержимое.
  • theme – подключаемая тема оформления. Tooltipster предоставляет набор стандартных тем, а также позволяет создавать кастомные.
  • Инициализация должна происходить после загрузки DOM, обычно внутри $(document).ready().

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

Tooltipster строится вокруг объектно-ориентированной архитектуры, что позволяет расширять функционал через плагины. Основные элементы:

  • Core – ядро библиотеки, отвечает за отображение, позиционирование и анимацию тултипов.
  • Instance – объект каждого тултипа, который хранит текущие настройки, состояние и методы управления.
  • Plugin – модуль, который расширяет возможности тултипа: новые эффекты, события или интерактивность.

Каждый плагин регистрируется через API Tooltipster, что позволяет централизованно управлять всеми расширениями и их приоритетом.

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

Регистрация плагина выполняется с помощью метода $.tooltipster.plugin. Синтаксис выглядит следующим образом:

$.tooltipster.plugin('myPlugin', {
    // Версия плагина
    version: '1.0.0',
    
    // Инициализация плагина на каждом экземпляре тултипа
    instance: function(instance, helper) {
        return {
            // Объект с методами плагина
            start: function() {
                console.log('Плагин активирован');
            },
            stop: function() {
                console.log('Плагин отключён');
            }
        };
    }
});

Обязательные элементы при регистрации:

  • version – строка, указывающая версию плагина.

  • instance – функция, принимающая два параметра:

    • instance – объект тултипа, к которому привязан плагин.
    • helper – вспомогательный объект с утилитами, например, helper.origin для доступа к DOM-элементу.

Методы, возвращаемые из функции instance, позволяют управлять жизненным циклом плагина: запускать его, останавливать и выполнять кастомные действия.

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

После регистрации плагина он может быть подключён при инициализации тултипа через параметр plugins:

$('.tooltip').tooltipster({
    content: 'Тултип с плагином',
    plugins: ['myPlugin']
});

Особенности подключения:

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

Взаимодействие плагинов с событиями тултипа

Tooltipster поддерживает множество событий: ready, before, after, open, close. Плагины могут подписываться на эти события через объект instance:

$.tooltipster.plugin('customLogger', {
    version: '1.0.0',
    instance: function(instance, helper) {
        return {
            start: function() {
                instance.on('open', function() {
                    console.log('Тултип открыт');
                });
                instance.on('close', function() {
                    console.log('Тултип закрыт');
                });
            }
        };
    }
});

Важные моменты:

  • Подписка через метод on привязывает плагин к событиям конкретного экземпляра тултипа.
  • Для глобального воздействия на все тултипы необходимо регистрировать событие в рамках ядра или создавать отдельный управляющий плагин.

Создание комплексного плагина

При разработке сложного плагина рекомендуется:

  1. Разделять методы start и stop для чёткой активации и деактивации функционала.
  2. Использовать helper.origin для прямого доступа к DOM-элементу тултипа и его родителя.
  3. Хранить внутренние данные внутри объекта instance через instance.data(key, value) для предотвращения конфликтов между плагинами.
  4. Реализовывать обработку ошибок и проверку совместимости с другими плагинами.

Пример комплексного плагина с анимацией и подсчётом кликов:

$.tooltipster.plugin('clickCounter', {
    version: '1.0.0',
    instance: function(instance, helper) {
        let count = 0;
        return {
            start: function() {
                $(helper.origin).on('click', function() {
                    count++;
                    instance.content('Клики: ' + count);
                });
            },
            stop: function() {
                $(helper.origin).off('click');
            }
        };
    }
});

Этот пример демонстрирует интеграцию логики плагина с состоянием тултипа и динамическим изменением содержимого.

Управление плагинами на лету

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

let instance = $('.tooltip').tooltipster().tooltipster('instance');
instance.plugins.add('myPlugin'); // добавить плагин
instance.plugins.remove('myPlugin'); // удалить плагин

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

Рекомендации по структуре плагинов

  • Использовать единый namespace для методов плагина, чтобы избежать конфликтов с другими расширениями.
  • Хранить настройки плагина через instance.options() или собственный объект конфигурации.
  • Всегда предусматривать метод stop для корректного отключения плагина и очистки обработчиков событий.
  • При работе с DOM использовать helper.origin и instance.content() для минимизации прямого вмешательства в структуру тултипа.

Эта структура позволяет создавать масштабируемые и легко поддерживаемые плагины Tooltipster, полностью используя объектно-ориентированную архитектуру и возможности событийной системы библиотеки.

Оглавление