Глобальные настройки по умолчанию

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

Инициализация глобальных настроек

Для задания глобальных параметров используется метод:

$.tooltipster.setDefaults({
    // настройки по умолчанию
});

Все тултипы, созданные после вызова setDefaults, будут наследовать указанные параметры, если при индивидуальной инициализации не переопределены конкретные опции.

Основные опции глобальных настроек

  • theme Определяет тему оформления тултипов. Можно использовать встроенные темы Tooltipster или собственные CSS-классы:

    theme: 'tooltipster-shadow'

  • animation Тип анимации при открытии и закрытии: 'fade', 'slide', 'grow'.

    animation: 'fade'

  • delay Задержка перед появлением тултипа в миллисекундах:

    delay: 300

  • trigger Событие, которое вызывает показ тултипа. Возможные значения: 'hover', 'click', 'custom'.

    trigger: 'hover'

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

    interactive: true

  • contentAsHTML Позволяет использовать HTML внутри тултипа:

    contentAsHTML: true

  • maxWidth Ограничивает максимальную ширину тултипа:

    maxWidth: 250

  • position Задаёт предпочтительное положение относительно элемента-мишени:

    position: 'top'

Управление глобальными событиями

Tooltipster позволяет назначать обработчики событий на уровне всех тултипов. Ключевые события:

  • before – перед отображением тултипа
  • after – после закрытия тултипа
  • ready – тултип готов к взаимодействию
  • close – при закрытии тултипа

Пример глобальной привязки обработчика:

$.tooltipster.setDefaults({
    functionReady: function(instance, helper) {
        console.log('Тултип готов:', helper.origin);
    }
});

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

Глобальные настройки не мешают индивидуальной конфигурации. Любой элемент может иметь свои параметры:

$('.my-element').tooltipster({
    theme: 'tooltipster-punk',
    delay: 500
});

В этом случае для элемента .my-element будут применены theme и delay, а остальные опции будут взяты из глобальных настроек.

Использование глобальных настроек с динамическим контентом

Для тултипов с динамически подгружаемым контентом удобно комбинировать глобальные параметры с функциями functionBefore и functionFormat:

$.tooltipster.setDefaults({
    functionBefore: function(instance, helper) {
        if (!instance.contentLoaded) {
            $.get('/tooltip-content', function(data){
                instance.content(data);
                instance.contentLoaded = true;
            });
        }
    },
    contentAsHTML: true
});

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

Важные рекомендации при использовании глобальных настроек

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

Пример полной конфигурации глобальных настроек

$.tooltipster.setDefaults({
    theme: 'tooltipster-shadow',
    animation: 'fade',
    delay: 300,
    trigger: 'hover',
    interactive: true,
    contentAsHTML: true,
    maxWidth: 300,
    position: 'top',
    functionBefore: function(instance, helper) {
        if (!instance.contentLoaded) {
            instance.content('Загрузка...');
        }
    },
    functionReady: function(instance, helper) {
        console.log('Тултип готов к показу');
    }
});

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

Оглавление