Работа с шаблонами

Tooltipster предоставляет возможность создавать динамические и кастомизированные всплывающие подсказки с использованием HTML-шаблонов. Это позволяет полностью контролировать визуальный стиль и структуру контента, выходя за рамки стандартного текста. Для работы с шаблонами используются опции content и functionInit, а также интеграция с библиотеками шаблонов, например, Handlebars или Mustache.

---

Использование HTML-контента в подсказках

По умолчанию Tooltipster принимает строку текста через опцию content. Для внедрения шаблонов можно передать HTML-элемент или jQuery-объект:

$('#element').tooltipster({
    content: $('
Заголовок
Описание элемента
'),
    theme: 'tooltipster-shadow'
});

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

• Использование HTML позволяет создавать сложные структуры, включая списки, таблицы и изображения.
• Любые стили, заданные в CSS, будут применяться внутри подсказки.
• Для обновления контента динамически можно использовать метод content после инициализации:

$('#element').tooltipster('content', $('
Новый HTML-контент
'));

---

Динамическая генерация контента с функцией functionInit

Опция functionInit позволяет генерировать контент на лету в момент отображения подсказки:

$('#element').tooltipster({
    functionInit: function(instance, helper) {
        var dynamicContent = $('
').text('Текущее время: ' + new Date().toLocaleTimeString());
        instance.content(dynamicContent);
    }
});

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

• instance предоставляет доступ к методам Tooltipster для управления подсказкой.
• helper.origin позволяет получить исходный элемент, к которому привязана подсказка.
• Такой подход удобен для подсказок с данными из API или при необходимости отображения состояния DOM.

---

Интеграция с шаблонизаторами

Для более сложных шаблонов удобно использовать библиотеки вроде Handlebars или Mustache:

var templateSource = $('#tooltip-template').html();
var template = Handlebars.compile(templateSource);

$('#element').tooltipster({
    content: template({ title: 'Заголовок', description: 'Описание через шаблон' }),
    theme: 'tooltipster-shadow'
});

Особенности интеграции:

• Шаблон можно хранить в