Контент из data-атрибутов

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

Подключение и инициализация

Для работы с Tooltipster необходимо подключить библиотеку и jQuery:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

Инициализация с поддержкой data-атрибутов:

$('.tooltip').tooltipster({
    contentAsHTML: true,
    theme: 'tooltipster-shadow',
    functionInit: function(instance, helper) {
        var content = $(helper.origin).data('tooltip-content');
        instance.content(content);
    }
});
  • contentAsHTML: true — позволяет использовать HTML в подсказке.
  • functionInit — функция, вызываемая при создании подсказки, где можно получить содержимое из data-атрибута.

Структура HTML с data-атрибутами

<button class="tooltip" data-tooltip-content="Пример подсказки с <strong>HTML</strong>">Наведи на меня</button>
<a href="#" class="tooltip" data-tooltip-content="Ссылка с подсказкой">Ссылка</a>
  • data-tooltip-content — стандартное название атрибута для хранения текста или HTML подсказки.
  • Можно использовать любые атрибуты, главное, чтобы они были уникальны для элемента.

Динамическое обновление контента

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

$('.tooltip').on('mouseenter', function() {
    var newContent = $(this).data('tooltip-content-new');
    $(this).tooltipster('content', newContent);
});
  • tooltipster('content', newContent) — изменяет содержимое подсказки на лету.
  • Это удобно для элементов, контент которых зависит от состояния страницы.

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

Можно комбинировать несколько data-атрибутов для разных частей подсказки:

<div class="tooltip" 
     data-tooltip-title="Заголовок" 
     data-tooltip-body="Основной текст подсказки">
    Наведи на меня
</div>

Инициализация с объединением:

$('.tooltip').tooltipster({
    contentAsHTML: true,
    functionInit: function(instance, helper) {
        var title = $(helper.origin).data('tooltip-title');
        var body = $(helper.origin).data('tooltip-body');
        instance.content('<h3>' + title + '</h3><p>' + body + '</p>');
    }
});
  • Позволяет создавать сложные подсказки с отдельными заголовками, списками и форматированием.
  • HTML внутри data-атрибутов упрощает поддержку, так как структура хранится прямо в разметке.

Подгрузка контента из data-атрибутов AJAX

Если необходимо динамически подгружать информацию по событию, можно комбинировать data-атрибуты с AJAX:

$('.tooltip').tooltipster({
    contentAsHTML: true,
    functionBefore: function(instance, helper) {
        if (!instance.content() || instance.content() === '') {
            var url = $(helper.origin).data('tooltip-ajax');
            $.get(url, function(data) {
                instance.content(data);
            });
        }
    }
});
  • functionBefore — вызывается перед отображением подсказки, позволяет подгрузить данные асинхронно.
  • data-tooltip-ajax — хранит URL для запроса.

Особенности и рекомендации

  1. Безопасность HTML — при использовании HTML из data-атрибутов важно контролировать содержимое, чтобы исключить XSS.
  2. Объем контента — большие блоки HTML в data-атрибутах могут затруднить читаемость кода, при необходимости лучше использовать отдельные шаблоны.
  3. Производительность — для большого количества элементов рекомендуется использовать делегирование событий и единый вызов Tooltipster для группы элементов.

Итоговая структура

<button class="tooltip" 
        data-tooltip-title="Подсказка" 
        data-tooltip-body="Подробный текст подсказки" 
        data-tooltip-ajax="tooltip-content.html">
    Элемент
</button>
$('.tooltip').tooltipster({
    contentAsHTML: true,
    theme: 'tooltipster-shadow',
    functionInit: function(instance, helper) {
        var title = $(helper.origin).data('tooltip-title');
        var body = $(helper.origin).data('tooltip-body');
        instance.content('<h3>' + title + '</h3><p>' + body + '</p>');
    },
    functionBefore: function(instance, helper) {
        var url = $(helper.origin).data('tooltip-ajax');
        if (url && !instance.content()) {
            $.get(url, function(data) {
                instance.content(data);
            });
        }
    }
});

Такой подход обеспечивает гибкость, масштабируемость и легкость управления контентом подсказок напрямую из HTML через data-атрибуты.

Оглавление