Метод option

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

Синтаксис метода

$(selector).tooltipster('option', optionName);
$(selector).tooltipster('option', optionName, optionValue);

Пояснения:

  • optionName — строка, название опции, которую требуется получить или изменить.
  • optionValue — новое значение опции. Если передан, метод обновляет конфигурацию тултипа. Если не передан, возвращается текущее значение опции.
  • Метод возвращает текущее значение опции, если не указано новое значение.

Получение значения опции

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

var delayTime = $('#myElement').tooltipster('option', 'delay');
console.log(delayTime); // 200

Здесь метод возвращает значение опции delay, которое было задано при инициализации или через предыдущий вызов option.

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

  • Получение значения возможно для любой опции Tooltipster: animation, theme, interactive, trigger, contentAsHTML и других.
  • Метод возвращает актуальное значение, даже если оно было изменено после инициализации.

Установка или изменение значения опции

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

$('#myElement').tooltipster('option', 'animation', 'fade');
$('#myElement').tooltipster('option', 'delay', 500);

Ключевые моменты:

  • Изменение опции влияет на все последующие показы тултипа.
  • Если изменить опцию во время отображения тултипа, изменение может вступить в силу только при следующем показе.

Примеры динамических изменений

  1. Изменение темы тултипа по событию:
$('#myElement').on('click', function() {
    $(this).tooltipster('option', 'theme', 'tooltipster-light');
});
  1. Включение интерактивности для конкретного тултипа:
$('#myElement').tooltipster('option', 'interactive', true);
  1. Смена анимации при наведении мыши:
$('#myElement').hover(function() {
    $(this).tooltipster('option', 'animation', 'grow');
});

Множественные изменения через объект

Метод option поддерживает передачу объекта для одновременной настройки нескольких параметров:

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

Преимущества такого подхода:

  • Упрощает код при необходимости изменения сразу нескольких опций.
  • Позволяет централизованно управлять конфигурацией тултипа в зависимости от условий страницы или действий пользователя.

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

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

Таблица часто используемых опций с методом option

Опция Тип значения Описание
animation string Анимация открытия тултипа (fade, grow, swing)
delay number Задержка перед показом или скрытием тултипа в миллисекундах
theme string / array CSS-класс или массив классов для стилизации тултипа
interactive boolean Позволяет взаимодействовать с контентом тултипа (клики, ссылки)
trigger string Событие, вызывающее тултип (hover, click, custom)
contentAsHTML boolean Разрешает HTML-контент внутри тултипа

Итоговое применение

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

Оглавление