Приоритет настроек

Tooltipster — мощная библиотека для создания подсказок в JavaScript, где каждая подсказка может иметь собственный набор настроек, но также наследовать глобальные параметры. Понимание того, как библиотека определяет приоритет значений, критично для корректного поведения тултипов.

Глобальные настройки и их роль

При инициализации Tooltipster через $.tooltipster.defaults, задаются значения по умолчанию для всех подсказок на странице. Примеры таких параметров:

$.tooltipster.defaults.animation = 'fade';
$.tooltipster.defaults.delay = 200;
$.tooltipster.defaults.theme = 'tooltipster-light';

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

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

Локальные настройки элемента

Локальные настройки задаются при вызове tooltipster() на конкретном элементе:

$('#myButton').tooltipster({
    animation: 'grow',
    delay: 100,
    theme: 'tooltipster-shadow'
});

Приоритет локальных параметров:

  1. Если для конкретного элемента указан параметр, он перекрывает глобальный.
  2. Если параметр отсутствует, применяется глобальный.
  3. Если глобальный параметр также не задан, Tooltipster использует внутренние дефолтные значения библиотеки.

Порядок наследования и перекрытия

Tooltipster применяет строгую иерархию:

  1. Inline data-атрибуты: можно задавать значения прямо в HTML с помощью data-tooltipster-*. Эти значения имеют высший приоритет над локальными и глобальными.

    <button id="infoButton" data-tooltipster-animation="swing" data-tooltipster-delay="300">Info</button>

  2. Локальные настройки в JS: перекрывают глобальные, но уступают data-атрибутам.

  3. Глобальные настройки: работают как резервные значения, если локальные и data-атрибуты не указаны.

Объединение параметров сложных объектов

Некоторые параметры Tooltipster принимают объекты, например functionBefore, functionReady или plugins. При задании таких объектов локальная настройка не заменяет полностью глобальную, а сливается с ней. Пример:

$.tooltipster.defaults.functionBefore = function(instance, helper){
    console.log('Глобальная функцияBefore');
};

$('#myButton').tooltipster({
    functionBefore: function(instance, helper){
        console.log('Локальная функцияBefore');
    }
});

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

$('#myButton').tooltipster({
    functionBefore: function(instance, helper){
        $.tooltipster.defaults.functionBefore(instance, helper);
        console.log('Локальная функцияBefore');
    }
});

Приоритет тем и CSS-классов

Темы (theme) также подчиняются иерархии:

  1. Data-атрибут data-tooltipster-theme — самый высокий приоритет.
  2. Локальная настройка theme.
  3. Глобальная настройка $.tooltipster.defaults.theme.

Важно учитывать, что темы влияют не только на стили, но и на поведение анимаций и отступов. Несоответствие приоритетов может привести к визуальным багам.

Порядок инициализации нескольких тултипов

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

  • Сначала применяется глобальный конфиг.
  • Затем локальные настройки каждого элемента.
  • Data-атрибуты перекрывают все предыдущие уровни.
  • При динамическом изменении настроек через метод instance.option('key', value) значение имеет самый высокий приоритет, пока тултип существует.
var instance = $('#myButton').tooltipster('instance');
instance.option('theme', 'tooltipster-noir'); // перекрывает все предыдущие уровни

Примеры конфликтов и их решение

Ситуация: глобальный delay = 200, локальный delay = 100, data-атрибут data-tooltipster-delay="300".

Результат: тултип будет показываться с задержкой 300 мс, так как data-атрибут имеет наивысший приоритет.

Ситуация: глобальный theme = 'tooltipster-light', локальный theme = 'tooltipster-shadow', нет data-атрибутов.

Результат: будет применена локальная тема tooltipster-shadow.

Использование метода option() для динамических изменений

Tooltipster позволяет изменять параметры после инициализации:

var instance = $('#myButton').tooltipster('instance');
instance.option('animation', 'fade');
instance.option('delay', 500);

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

  • Значения, заданные через option(), имеют приоритет выше локальных и глобальных настроек.
  • Изменения применяются немедленно, без повторной инициализации.

Итоговая схема приоритетов

Уровень Применение
1 Data-атрибуты HTML (data-tooltipster-*)
2 Метод option() для конкретного экземпляра
3 Локальные настройки JS при вызове tooltipster({...})
4 Глобальные настройки через $.tooltipster.defaults
5 Встроенные дефолтные значения Tooltipster

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

Оглавление