Контент из DOM-элементов

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

Подключение Tooltipster и подготовка DOM

Для начала необходимо убедиться, что библиотека подключена корректно. Основные файлы:

<link rel="stylesheet" href="tooltipster.bundle.min.css">
<script src="jquery.min.js"></script>
<script src="tooltipster.bundle.min.js"></script>

Далее создается элемент, который будет содержать всплывающий контент:

<div id="tooltip-content" style="display: none;">
  <h3>Заголовок подсказки</h3>
  <p>Детальное описание с форматированием и ссылками.</p>
  <button id="tooltip-action">Кликнуть</button>
</div>

<button class="tooltip-target">Наведи на меня</button>

Элемент #tooltip-content скрыт с помощью display: none, так как Tooltipster сам управляет его отображением.

Инициализация Tooltipster с DOM-контентом

Для создания подсказки из DOM-элемента используется метод content и функция jQuery для выбора элемента:

$('.tooltip-target').tooltipster({
  content: $('#tooltip-content').clone().removeAttr('id').show(),
  interactive: true,
  theme: 'tooltipster-light',
  side: 'right',
  animation: 'fade'
});

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

clone() – позволяет создавать копию DOM-элемента, чтобы оригинальный элемент оставался скрытым и не нарушал структуру страницы.
removeAttr('id') – исключает конфликты идентификаторов при клонировании.
show() – делает элемент видимым внутри Tooltipster.
interactive: true – обеспечивает возможность взаимодействия с элементами внутри подсказки (кнопки, ссылки, формы).

Динамический контент

Tooltipster поддерживает динамическое обновление содержимого через метод content после инициализации:

$('.tooltip-target').tooltipster({
  content: $('<span>Загрузка...</span>'),
  interactive: true
});

$('.tooltip-target').on('mouseenter', function() {
  var dynamicContent = $('<div><p>Текущая дата: ' + new Date().toLocaleString() + '</p></div>');
  $(this).tooltipster('content', dynamicContent);
});

Позволяет изменять содержимое подсказки в зависимости от состояния страницы или действий пользователя.
Можно использовать AJAX-запросы для загрузки данных и последующего отображения их в подсказке.

Контент с событиями

Для интерактивных DOM-элементов важно корректно назначать обработчики событий:

$('#tooltip-action').on('click', function() {
  alert('Кнопка в подсказке нажата');
});

При клонировании с помощью clone() необходимо учитывать, что привязанные события не копируются по умолчанию. Чтобы сохранить их, можно использовать clone(true):

content: $('#tooltip-content').clone(true).removeAttr('id').show()

Работа с формами в подсказках

Формы внутри Tooltipster требуют interactive: true, чтобы можно было вводить данные и использовать элементы управления. Пример:

<div id="form-tooltip" style="display: none;">
  <form id="tooltip-form">
    <input type="text" name="username" placeholder="Имя">
    <button type="submit">Отправить</button>
  </form>
</div>

$('.tooltip-target').tooltipster({
  content: $('#form-tooltip').clone(true).removeAttr('id').show(),
  interactive: true
});

$(document).on('submit', '#tooltip-form', function(e) {
  e.preventDefault();
  var name = $(this).find('input[name="username"]').val();
  alert('Имя: ' + name);
});

document.on('submit', ...) используется для корректной работы событий на клонированных элементах.
Позволяет создавать полноценные формы и интерактивные панели прямо в подсказках.

Темизация и стилизация DOM-контента

Tooltipster применяет собственные классы темы, но внутренний DOM можно стилизовать отдельно:

#tooltip-content h3 {
  color: #2a2a2a;
  font-size: 16px;
  margin-bottom: 5px;
}

#tooltip-content p {
  font-size: 14px;
  line-height: 1.4;
}

#tooltip-content button {
  padding: 5px 10px;
  background-color: #007bff;
  border: none;
  color: white;
  cursor: pointer;
}

Стили применяются к клонированному элементу без изменения оригинального DOM.
Можно использовать анимации и псевдоклассы CSS для реакций на наведение и клик.