Официальные плагины

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

Tooltipster Content

Описание: Плагин отвечает за управление содержимым подсказки. Позволяет использовать HTML, AJAX, изображения и любые другие элементы внутри тултипа.

Ключевые возможности:

  • HTML-контент – можно передавать не только текст, но и полноценные HTML-элементы.
  • AJAX-загрузка – динамическая подгрузка данных при наведении, без перезагрузки страницы.
  • Функции колбэков – возможность использовать функции для генерации содержимого на лету.

Пример использования:

$('.tooltip').tooltipster({
    content: $('<span>Динамический <strong>HTML</strong> контент</span>'),
    contentAsHTML: true,
    functionBefore: function(instance, helper){
        if(!instance.contentLoaded){
            $.get('data.html', function(data){
                instance.content(data);
                instance.contentLoaded = true;
            });
        }
    }
});

Tooltipster Animate

Описание: Плагин добавляет анимацию при показе и скрытии подсказок. Поддерживает различные эффекты, такие как fade, grow, swing, slide.

Настройка эффектов:

  • animation – название анимации (fade, grow, swing, slide).
  • duration – длительность анимации в миллисекундах.
  • speed – синоним duration, можно использовать как альтернативу.

Пример использования:

$('.tooltip').tooltipster({
    animation: 'grow',
    animationDuration: 300
});

Tooltipster SideTip

Описание: Плагин, отвечающий за позиционирование подсказки относительно элемента. Управляет стрелкой (tip) и сторонами (top, bottom, left, right).

Основные параметры:

  • side – сторона появления подсказки.
  • offsetX и offsetY – смещение по горизонтали и вертикали.
  • distance – расстояние от целевого элемента до тултипа.

Пример использования:

$('.tooltip').tooltipster({
    side: 'right',
    distance: 10,
    offsetX: 5,
    offsetY: 0
});

Tooltipster Follow

Описание: Позволяет подсказке следовать за курсором пользователя при наведении.

Настройки:

  • followCursor – true или false.
  • interactive – определяет, можно ли взаимодействовать с подсказкой при движении курсора.

Пример:

$('.tooltip').tooltipster({
    followCursor: true,
    interactive: true
});

Tooltipster Delay

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

Ключевые параметры:

  • delay – задержка показа в миллисекундах.
  • triggerOpen и triggerClose – позволяют задать разные события для открытия и закрытия.

Пример:

$('.tooltip').tooltipster({
    delay: 500,
    trigger: 'hover'
});

Tooltipster Interactive

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

Параметры:

  • interactive – включает интерактивность.
  • interactiveTolerance – расстояние курсора, при котором подсказка остаётся активной.

Пример:

$('.tooltip').tooltipster({
    interactive: true,
    interactiveTolerance: 50
});

Tooltipster Multiple

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

Настройки:

  • multiple – true разрешает множественные тултипы.
  • maxWidth – ограничение ширины каждой подсказки.

Пример:

$('.tooltip').tooltipster({
    multiple: true,
    maxWidth: 300
});

Tooltipster Touch

Описание: Обеспечивает корректную работу подсказок на сенсорных устройствах.

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

  • Автоматическая обработка событий tap.
  • Возможность отключить тултипы для мобильных устройств или изменить их поведение.

Пример:

$('.tooltip').tooltipster({
    touchDevices: true,
    trigger: 'click'
});

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

Оглавление