Минимальная разметка HTML

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

Подключение необходимых файлов

Для начала необходимо подключить CSS и JS-файлы Tooltipster. Минимальный набор включает:

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

Важно: Tooltipster требует наличия библиотеки jQuery, так как она построена поверх её API.

Создание целевого элемента

Любой элемент, на котором необходимо показать подсказку, может быть обычным HTML-тегом: <div>, <span>, <button> и т.д. Главное — наличие идентификатора или класса для выбора через jQuery. Например:

<button class="tooltip" title="Привет, я Tooltipster!">Наведи на меня</button>

Ключевой момент: атрибут title служит стандартной подсказкой, которую Tooltipster автоматически использует как содержимое тултипа, если не задано другое.

Минимальная структура для инициализации

Для запуска Tooltipster достаточно обернуть выборку элементов в jQuery и вызвать метод .tooltipster(). Пример:

<script>
  $(document).ready(function() {
      $('.tooltip').tooltipster();
  });
</script>

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

.tooltipster() без аргументов создаёт тултип с настройками по умолчанию.
Элементы, на которых вызывается метод, должны существовать в DOM на момент инициализации.
Tooltipster автоматически скрывает стандартную подсказку браузера (title) и заменяет её на кастомный тултип.

Настройка содержимого через HTML

Tooltipster поддерживает использование HTML внутри подсказки. Для этого в минимальной разметке достаточно использовать атрибут data-tooltip-content:

<button class="tooltip" data-tooltip-content="#tooltip_content">
  Наведи на меня
</button>

<div class="tooltip_templates">
  <div id="tooltip_content">
      <strong>HTML</strong> содержимое тултипа
  </div>
</div>

Инициализация остаётся прежней:

$('.tooltip').tooltipster({
    contentAsHTML: true
});

Пояснение:

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

Минимальная разметка для динамического тултипа

Для динамических подсказок можно использовать функцию functionBefore:

$('.tooltip').tooltipster({
    functionBefore: function(instance, helper){
        var $origin = $(helper.origin);
        if ($origin.data('loaded') !== true) {
            // Получение данных через AJAX или вычисления
            instance.content('Динамическое содержимое');
            $origin.data('loaded', true);
        }
    }
});

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

helper.origin — элемент DOM, на котором вызван тултип.
instance.content() позволяет заменить содержимое перед показом.
Флаг data('loaded') предотвращает повторную загрузку при каждом наведении.