Объект настроек

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

Инициализация и структура

Для создания тултипа используется метод $(element).tooltipster(options), где options — это объект настроек. Структура объекта следующая:

$('#example').tooltipster({
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-default',
    content: 'Пример подсказки',
    trigger: 'hover'
});
  • animation — тип анимации появления и исчезновения (fade, grow, swing, slide, fall). По умолчанию: 'fade'.
  • delay — задержка перед показом и скрытием тултипа в миллисекундах. Можно задать одно значение (для появления и скрытия одинаковое) или массив [появление, скрытие].
  • theme — класс CSS для стилизации тултипа. Позволяет использовать готовые темы или создавать собственные.
  • content — текст или HTML-контент тултипа. Может быть строкой, jQuery-объектом или функцией, возвращающей содержимое.
  • trigger — событие, запускающее тултип (hover, click, custom). Значение 'custom' позволяет управлять показом и скрытием вручную через API.

Позиционирование

Позиция тултипа управляется параметрами:

  • side — сторона, где появится тултип относительно элемента (top, right, bottom, left). Можно задать массив приоритетов, например: ['top', 'bottom'].
  • functionPosition — функция, позволяющая полностью контролировать позиционирование. Получает объект origin, tooltip, position и должен возвращать объект с координатами {top, left}.
  • offsetX / offsetY — смещение тултипа по горизонтали и вертикали в пикселях.

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

$('#example').tooltipster({
    functionPosition: function(instance, helper, position){
        position.coord.top += 10; // смещаем вниз на 10px
        return position;
    }
});

Взаимодействие с пользователем

  • interactive — если true, тултип реагирует на действия пользователя внутри себя (например, клики на ссылки). Важно при размещении интерактивного контента.
  • triggerOpen / triggerClose — дополнительные события открытия и закрытия. Можно комбинировать mouseenter, click, tap и т.д.
  • autoClose — автоматически закрывать тултип при клике вне его, если установлено true.

Управление содержимым

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

  • content как функция:
$('#example').tooltipster({
    content: function(instance, origin){
        return 'Текущее время: ' + new Date().toLocaleTimeString();
    }
});

  • Методы API:

    • instance.content('новый контент') — обновление текста/HTML.
    • instance.content(null) — очистка содержимого.

Анимация и скорость

  • animationDuration — время анимации появления/исчезновения в миллисекундах. Можно задать отдельное значение для появления и исчезновения [show, hide].
  • delay — задержка перед показом тултипа. В сочетании с animationDuration обеспечивает плавное поведение.

Пример комбинирования:

$('#example').tooltipster({
    animation: 'slide',
    animationDuration: 300,
    delay: [100, 200] // 100ms для показа, 200ms для скрытия
});

Темизация и стилизация

  • theme — основной класс темы, например 'tooltipster-light'.
  • multiple — позволяет открывать несколько тултипов одновременно на одном элементе.
  • maxWidth / minWidth — задают размеры тултипа.
  • contentAsHTML — если true, позволяет использовать HTML в содержимом. По умолчанию false.

Жизненный цикл и события

Tooltipster поддерживает обширный набор колбеков, которые можно задать в объекте настроек:

  • functionBefore — вызывается перед открытием тултипа, можно отменить показ, вернув false.
  • functionReady — после отображения тултипа.
  • functionAfter — после закрытия тултипа.
  • functionFormat — позволяет форматировать содержимое динамически.

Пример использования колбеков:

$('#example').tooltipster({
    functionBefore: function(instance, helper){
        if(!userLoggedIn){
            return false; // не показывать тултип
        }
    },
    functionReady: function(instance, helper){
        console.log('Тултип показан');
    }
});

Настройка поведения на мобильных устройствах

  • touchDevices — включение/отключение тултипов на сенсорных устройствах.
  • triggerTap — обработка события tap для открытия на мобильных.
  • repositionOnScroll — динамическое перерасположение тултипа при прокрутке страницы.

Резюме ключевых свойств объекта настроек

Свойство Тип Назначение
animation string Тип анимации
animationDuration number / array Время анимации (ms)
delay number / array Задержка перед открытием/закрытием
theme string CSS класс для темы
content string / function / jQuery Содержимое тултипа
trigger string Событие для открытия (hover, click, custom)
interactive boolean Включение интерактивного контента
side string / array Предпочтительная сторона
functionPosition function Кастомное позиционирование
maxWidth / minWidth number Ограничение ширины тултипа
functionBefore function Колбек перед открытием
functionReady function Колбек после отображения
functionAfter function Колбек после закрытия

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

Оглавление