Индивидуальные настройки для элементов

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

Базовый принцип индивидуальной настройки

Каждый tooltip инициализируется отдельно, что позволяет передавать собственный набор опций:

$('.element-1').tooltipster({
    theme: 'tooltipster-light',
    delay: 200
});

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

В данном примере два элемента используют разные темы оформления и задержку появления.

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

Если в проекте используются глобальные настройки, индивидуальные параметры элемента имеют приоритет над ними:

$.tooltipster.setDefaults({
    theme: 'tooltipster-default',
    delay: 300
});

$('.custom-element').tooltipster({
    delay: 1000
});

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

Настройка внешнего вида

Темы оформления

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

$('.item').tooltipster({
    theme: ['tooltipster-noir', 'custom-theme']
});

Можно комбинировать несколько классов для более точного контроля стилей.

Размеры и позиционирование

$('.item').tooltipster({
    maxWidth: 300,
    side: 'right'
});
  • maxWidth — ограничивает ширину подсказки
  • side — определяет сторону появления (top, bottom, left, right)

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

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

$('.item').tooltipster({
    delay: 200,
    delayTouch: [100, 300]
});
  • Для сенсорных устройств можно задать отдельные значения
  • Массив [появление, скрытие] даёт более точный контроль

Триггеры открытия

$('.item').tooltipster({
    trigger: 'click'
});

Возможные значения:

  • hover — по наведению
  • click — по клику
  • custom — ручное управление

Ручное управление

$('.item').tooltipster({
    trigger: 'custom'
});

$('.item').on('click', function() {
    $(this).tooltipster('open');
});

Позволяет полностью контролировать жизненный цикл tooltip.

Работа с содержимым

Статическое содержимое

$('.item').tooltipster({
    content: 'Простая подсказка'
});

HTML-контент

$('.item').tooltipster({
    content: $('<span><strong>Важно:</strong> текст подсказки</span>')
});

Tooltipster корректно обрабатывает jQuery-объекты.

Динамическое содержимое

$('.item').tooltipster({
    functionBefore: function(instance, helper) {
        instance.content('Загрузка...');
        
        setTimeout(function() {
            instance.content('Данные загружены');
        }, 1000);
    }
});

Используется для подгрузки данных перед отображением.

Индивидуальные события

Каждый tooltip может иметь собственные обработчики:

$('.item').tooltipster({
    functionInit: function(instance, helper) {
        console.log('Инициализация:', helper.origin);
    },
    functionAfter: function(instance, helper) {
        console.log('Закрытие tooltip');
    }
});

Основные события:

  • functionInit — при создании
  • functionBefore — перед открытием
  • functionReady — после открытия
  • functionAfter — после закрытия

Анимации

$('.item').tooltipster({
    animation: 'fade',
    animationDuration: 350
});

Можно задать:

  • тип анимации
  • длительность
  • отключить анимацию полностью

Индивидуальные настройки для групп элементов

Часто требуется задать разные настройки для групп:

$('.info').tooltipster({
    theme: 'tooltipster-light'
});

$('.warning').tooltipster({
    theme: 'tooltipster-punk',
    delay: 100
});

Такой подход сохраняет читаемость и упрощает поддержку.

Использование data-атрибутов

Для гибкости конфигурации настройки можно хранить прямо в HTML:

<button class="tooltip" data-theme="tooltipster-shadow" title="Подсказка"></button>
$('.tooltip').each(function() {
    $(this).tooltipster({
        theme: $(this).data('theme')
    });
});

Позволяет управлять поведением без изменения JS-кода.

Условная настройка

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

$('.item').tooltipster({
    side: window.innerWidth < 768 ? 'bottom' : 'right'
});

Адаптивное поведение повышает удобство использования.

Комбинирование настроек

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

$('.complex-item').tooltipster({
    theme: ['tooltipster-noir'],
    animation: 'grow',
    delay: 150,
    side: 'top',
    trigger: 'hover',
    maxWidth: 250,
    contentAsHTML: true
});

Такая конфигурация даёт полный контроль над отображением и поведением.

Оптимизация производительности

При большом количестве элементов:

  • избегать повторной инициализации
  • использовать делегирование
  • применять ленивую загрузку содержимого
$('.item').tooltipster({
    functionBefore: function(instance, helper) {
        if (!instance.content()) {
            instance.content('Подгрузка...');
        }
    }
});

Расширение через плагины

Tooltipster поддерживает плагины, которые можно применять индивидуально:

$('.item').tooltipster({
    plugins: ['follower']
});

Каждый элемент может использовать свой набор расширений.

Практические сценарии

Разные типы подсказок

$('.help').tooltipster({
    theme: 'tooltipster-light'
});

$('.error').tooltipster({
    theme: 'tooltipster-borderless',
    animation: 'shake'
});

Интерактивные подсказки

$('.interactive').tooltipster({
    interactive: true,
    trigger: 'click'
});

Позволяет взаимодействовать с содержимым (кнопки, формы).

Структурирование конфигурации

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

const tooltipConfig = {
    default: {
        theme: 'tooltipster-default',
        delay: 200
    },
    warning: {
        theme: 'tooltipster-punk',
        delay: 100
    }
};

$('.item').tooltipster(tooltipConfig.default);

Упрощает масштабирование и поддержку кода.

Контроль жизненного цикла

Каждый элемент можно управлять отдельно:

$('.item').tooltipster('open');
$('.item').tooltipster('close');
$('.item').tooltipster('destroy');

Позволяет гибко интегрировать tooltip в бизнес-логику приложения.

Индивидуальные настройки в Tooltipster формируют основу гибкого пользовательского интерфейса, позволяя адаптировать поведение и внешний вид подсказок под конкретные сценарии взаимодействия.

Оглавление