HTML-контент

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

Инициализация с HTML

Для отображения HTML-контента необходимо использовать параметр content вместе с опцией contentAsHTML: true:

$('#myElement').tooltipster({
    content: $('<div><strong>Заголовок:</strong> Подробное описание</div>'),
    contentAsHTML: true
});

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

  • contentAsHTML: true обязателен для корректного отображения HTML.
  • В качестве контента можно передавать как строку с HTML, так и jQuery-объект.
  • Tooltipster автоматически вставляет контент в DOM и применяет стили.

Использование динамического HTML

Иногда содержимое подсказки зависит от состояния страницы или данных, полученных через AJAX. Для таких случаев применяется функция functionBefore:

$('#myElement').tooltipster({
    contentAsHTML: true,
    functionBefore: function(instance, helper){
        if (!helper.origin.data('loaded')) {
            $.get('/api/info', function(data){
                instance.content($('<div>' + data + '</div>'));
                helper.origin.data('loaded', true);
            });
        }
    }
});

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

  • Функция functionBefore выполняется перед отображением подсказки.
  • Позволяет подгружать данные асинхронно.
  • Установка флага data('loaded', true) предотвращает повторные запросы.

Встраивание интерактивных элементов

HTML-контент может включать интерактивные элементы, например кнопки или формы:

$('#myButton').tooltipster({
    content: $('<div><form><input type="text" placeholder="Введите имя"><button type="submit">Отправить</button></form></div>'),
    contentAsHTML: true,
    interactive: true
});

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

  • Опция interactive: true позволяет взаимодействовать с элементами внутри подсказки.
  • Без interactive любые клики на элементы подсказки будут закрывать её.
  • Формы, ссылки и кнопки полностью функциональны.

Стилизация HTML-контента

Tooltipster наследует стили HTML-контента от страницы, но можно добавлять собственные классы:

$('#myElement').tooltipster({
    content: $('<div class="custom-tooltip"><p>Пример <em>стилизированного</em> текста</p></div>'),
    contentAsHTML: true,
    theme: 'tooltipster-shadow'
});

Рекомендации:

  • Создавать отдельные CSS-классы для сложных подсказок.
  • Использовать стандартные темы Tooltipster (tooltipster-shadow, tooltipster-light) для базового оформления.
  • Поддерживаются анимации и переходы, применяемые к HTML-контенту.

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

  • Большой объём HTML может замедлять отображение, особенно при использовании анимаций.
  • При динамическом контенте важно освобождать ресурсы (удалять временные элементы из DOM).
  • Для сложных интерфейсов лучше использовать отдельные компоненты, а Tooltipster оставлять для вспомогательной информации.

Примеры продвинутого HTML-контента

  1. Списки с иконками:
$('#listElement').tooltipster({
    content: $('<ul><li><i class="icon-ok"></i> Пункт 1</li><li><i class="icon-ok"></i> Пункт 2</li></ul>'),
    contentAsHTML: true
});
  1. Вложенные блоки:
$('#nestedElement').tooltipster({
    content: $('<div><h4>Заголовок</h4><div><p>Подробный текст внутри блока</p></div></div>'),
    contentAsHTML: true
});
  1. Интерактивные списки с кнопками:
$('#interactiveList').tooltipster({
    content: $('<ul><li>Элемент <button>Действие</button></li></ul>'),
    contentAsHTML: true,
    interactive: true
});

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

Оглавление