Функции для генерации контента

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

Использование функции functionBefore для динамического контента

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

function(instance, helper) {
    // instance – объект текущего тултипа
    // helper – вспомогательный объект с reference и origin
}

Пример динамического текста:

$('.tooltip').tooltipster({
    functionBefore: function(instance, helper) {
        const element = helper.origin;
        const dataValue = $(element).data('info');
        instance.content('Динамический контент: ' + dataValue);
    }
});

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

  • instance.content() принимает строку, jQuery-объект или HTML-разметку.
  • Функция вызывается каждый раз перед показом тултипа, что гарантирует актуальность данных.
  • Можно использовать асинхронные операции с functionReady для обновления контента после завершения запросов.

Генерация HTML-контента

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

$('.tooltip-html').tooltipster({
    contentAsHTML: true,
    content: $('<div><h3>Заголовок</h3><p>Подробная информация</p></div>')
});

Преимущества:

  • Возможность стилевой кастомизации через CSS.
  • Использование интерактивных элементов (кнопки, ссылки) без потери функциональности.
  • Легкая интеграция с библиотеками визуализации, например, графиками или картами.

Асинхронная загрузка контента

Для случаев, когда информация берется с сервера, Tooltipster позволяет использовать функции, возвращающие промисы, или обновлять содержимое в functionReady.

$('.tooltip-ajax').tooltipster({
    content: 'Загрузка...',
    functionReady: function(instance, helper) {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                instance.content('<strong>' + data.title + '</strong><p>' + data.description + '</p>');
            });
    }
});

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

  • Тултип сначала отображает заглушку (loading), затем заменяет содержимое после получения данных.
  • Позволяет создавать динамические интерфейсы с минимальной задержкой.
  • Можно комбинировать с кэшированием, чтобы не перегружать сервер повторными запросами.

Использование функции functionInit для первичной генерации

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

$('.tooltip-init').tooltipster({
    functionInit: function(instance, helper) {
        const initialContent = '<span>Стартовое значение: ' + $(helper.origin).data('start') + '</span>';
        instance.content(initialContent);
    }
});

Преимущества:

  • Снижение нагрузки на повторные вычисления.
  • Возможность предварительной подготовки сложного HTML-контента.
  • Совместимость с кэшированием данных для быстрого отображения тултипа.

Использование шаблонов и внешних функций

Для сложного контента удобно использовать шаблонизаторы или внешние функции. Например, с библиотекой Mustache:

function generateTooltip(data) {
    return Mustache.render('<h4>{{title}}</h4><p>{{description}}</p>', data);
}

$('.tooltip-template').tooltipster({
    functionBefore: function(instance, helper) {
        const data = $(helper.origin).data('tooltip');
        instance.content(generateTooltip(data));
    },
    contentAsHTML: true
});

Преимущества:

  • Разделение логики генерации и структуры контента.
  • Возможность переиспользования шаблонов для разных элементов.
  • Легкая поддержка многоязычности и адаптивного контента.

Итоговая структура для генерации контента

  1. Статический контент – простой текст или HTML через content.
  2. Динамический синхронный контент – через functionBefore.
  3. Асинхронный контент – через functionReady с fetch/AJAX.
  4. Инициализация контента один раз – через functionInit.
  5. Шаблонные подходы – внешние функции и шаблонизаторы для сложных структур.

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

Оглавление