Передача параметров при инициализации

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

$('.tooltip').tooltipster({
    content: 'Пример текста',
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-light'
});

Здесь $('.tooltip') — это селектор элементов, к которым применяется Tooltipster. Параметры передаются в виде объекта, где ключи соответствуют именам опций, а значения — их конфигурации.

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

  • content — задаёт содержимое подсказки. Может быть строкой, HTML-элементом или jQuery-объектом.
  • animation — определяет эффект появления: 'fade', 'grow', 'swing', 'slide'.
  • delay — время задержки перед показом подсказки в миллисекундах.
  • theme — подключаемая тема для визуального оформления подсказки.
  • trigger — событие, которое вызывает подсказку: 'hover', 'click', 'custom'.
  • interactive — делает подсказку интерактивной (true/false), позволяя взаимодействовать с её содержимым.

Пример с интерактивной подсказкой и HTML-контентом:

$('.tooltip').tooltipster({
    content: $('<span>Нажмите <a href="#">сюда</a></span>'),
    interactive: true,
    theme: 'tooltipster-shadow',
    animation: 'grow'
});

Передача динамических параметров

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

$('.tooltip').tooltipster({
    content: function(instance, helper) {
        return $(helper.origin).data('tooltip-text');
    },
    delay: 100,
    theme: 'tooltipster-noir'
});

Параметр helper.origin содержит DOM-элемент, к которому привязана подсказка. Такой подход позволяет использовать одну конфигурацию для множества элементов с уникальным содержимым.

Параметры позиционирования

Tooltipster позволяет управлять позицией подсказки с помощью опций side, distance и functionPosition:

  • side — сторона, на которой будет отображаться подсказка: 'top', 'bottom', 'left', 'right'.
  • distance — расстояние в пикселях от элемента до подсказки.
  • functionPosition — функция для тонкой настройки позиции:
$('.tooltip').tooltipster({
    side: 'top',
    distance: 10,
    functionPosition: function(instance, helper, position){
        position.coord.left += 20;
        position.coord.top -= 5;
        return position;
    }
});

Функция functionPosition принимает объект position с координатами подсказки и позволяет программно смещать её положение.

Настройка многократных подсказок

Для элементов, к которым привязываются разные подсказки с уникальными параметрами, можно использовать объект с ключами:

$('.tooltip').each(function() {
    $(this).tooltipster({
        content: $(this).data('tooltip-content'),
        theme: $(this).data('tooltip-theme') || 'tooltipster-default',
        animation: 'fade',
        delay: parseInt($(this).data('tooltip-delay')) || 200
    });
});

Такой способ обеспечивает индивидуальные настройки для каждой подсказки без дублирования кода.

Важные дополнительные параметры

  • maxWidth — ограничение ширины подсказки в пикселях.
  • minWidth — минимальная ширина.
  • touchDevices — определяет, будет ли подсказка работать на сенсорных устройствах.
  • multiple — позволяет отображать несколько подсказок одновременно.
  • functionReady — колбэк, который вызывается после появления подсказки:
$('.tooltip').tooltipster({
    content: 'Готово!',
    functionReady: function(instance, helper){
        console.log('Подсказка отображена для элемента', helper.origin);
    }
});

Передача параметров через HTML-атрибуты

Tooltipster поддерживает инициализацию с данными, указанными в HTML-атрибутах data-tooltip-content, data-tooltip-theme и др.:

<button class="tooltip" data-tooltip-content="Содержимое" data-tooltip-theme="tooltipster-punk">
    Наведи на меня
</button>
<script>
$('.tooltip').tooltipster();
</script>

В этом случае библиотека автоматически считывает значения атрибутов и применяет их как параметры инициализации.

Использование опций совместно

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

$('.tooltip').tooltipster({
    content: 'Пример комплексной подсказки',
    animation: 'swing',
    delay: 150,
    theme: 'tooltipster-light',
    interactive: true,
    side: 'bottom',
    distance: 12,
    maxWidth: 300,
    multiple: true
});

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

Оглавление