Изменение настроек после инициализации

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

Использование метода option()

Метод option() применяется на объекте, к которому была применена инициализация Tooltipster:

$('#myElement').tooltipster('option', 'trigger', 'click');

В данном примере изменяется событие, запускающее тултип, с дефолтного hover на click.

Особенности метода:

  • Первый аргумент: название параметра, который требуется изменить.
  • Второй аргумент: новое значение параметра.
  • Метод можно использовать как для одиночного свойства, так и для передачи объекта с несколькими параметрами одновременно.

Изменение нескольких настроек

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

$('#myElement').tooltipster('option', {
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-light'
});

В примере:

  • animation — тип анимации появления тултипа (fade, swing, grow и др.).
  • delay — задержка перед отображением тултипа в миллисекундах.
  • theme — визуальная тема тултипа.

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

Изменение содержимого тултипа после инициализации

Tooltipster позволяет динамически обновлять текст или HTML-содержимое подсказки:

$('#myElement').tooltipster('content', 'Новое содержимое тултипа');

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

  • Метод content() заменяет текущее содержимое на новое.
  • Можно передавать строку или объект jQuery для сложной разметки.
  • При необходимости можно использовать functionBefore для подготовки динамического содержимого перед показом.
$('#myElement').tooltipster({
    functionBefore: function(instance, helper){
        var newContent = 'Текущее время: ' + new Date().toLocaleTimeString();
        instance.content(newContent);
    }
});

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

Динамическое включение и отключение тултипа

Для контроля видимости или активности тултипа используются специальные опции:

// Отключить тултип
$('#myElement').tooltipster('disable');

// Включить тултип обратно
$('#myElement').tooltipster('enable');

Эти методы не удаляют тултип и позволяют временно управлять его поведением без повторной инициализации.

Смена тем и стилей после инициализации

Tooltipster поддерживает динамическую смену темы:

$('#myElement').tooltipster('option', 'theme', 'tooltipster-noir');
  • Полезно при изменении стиля страницы без перезагрузки тултипа.
  • Темы подключаются через CSS, их можно комбинировать и создавать собственные.

Контроль позиционирования в реальном времени

Для динамических интерфейсов возможно изменение позиции тултипа на лету:

$('#myElement').tooltipster('option', 'side', 'right');
$('#myElement').tooltipster('reposition');
  • side задаёт сторону относительно элемента (top, bottom, left, right).
  • После изменения позиции рекомендуется вызвать reposition() для мгновенного применения.

Ограничения и рекомендации

  • Некоторые опции невозможно менять после инициализации, например contentCloning или contentAsHTML. В таких случаях требуется полная повторная инициализация.
  • Частое изменение содержимого и стиля может приводить к мерцанию или сдвигам тултипа, поэтому желательно оптимизировать обновления.
  • Методы option() и content() совместимы со всеми версиями Tooltipster начиная с 4.x.

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

$('#myElement').tooltipster('option', {
    trigger: 'click',
    animation: 'fade',
    delay: 100,
    theme: 'tooltipster-shadow',
    side: 'right'
});

$('#myElement').tooltipster('content', '<strong>Обновлённый контент</strong>');
$('#myElement').tooltipster('reposition');

В этом примере:

  1. Меняется способ вызова тултипа на клик.
  2. Устанавливается анимация fade с небольшой задержкой.
  3. Применяется новая тема и сторона отображения.
  4. Содержимое заменяется на HTML-разметку.
  5. Происходит корректное перерасположение тултипа после всех изменений.

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

Оглавление