Измените содержимое всплывающей подсказки так, чтобы оно отображалось в HTML-тегах.

Question

У меня есть код ниже. Чего я хочу достичь, так это когда у меня парят эти h1 и p. содержимое выводится правильно и динамически в tooltip (h1 -> Это заголовок, p -> это абзац). Теперь вывод tooltip зафиксирован на span(id = "tooltip_content")

$(document).ready(function() {
  $('.tooltip').tooltipster();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<h1 class="tooltip" data-tooltip-content="#tooltip_content">This is a Heading</h1>
<p class="tooltip" data-tooltip-content="#tooltip_content">This is a paragraph.</p>


<div style="display:none" class="tooltip_templates">
  <span id="tooltip_content">
       <strong>This is the content of my tooltip!</strong>
    </span>
</div>

Answer 1

Из документации tooltipster (5.):

Важно: если у вас есть две подсказки с одинаковым атрибутом data-tooltip-content (то есть, вы хотите использовать обетот же элемент HTML), установите для параметра contentCloning значение true при инициализации всплывающих подсказок:

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