Change tooltip's content to reflect those in html tags

Question

I have the code below. What i want to achieve is when i hover those h1 and p. the contents are output correctly and dynamically to the tooltip(h1 ->This is heading,p -> this is paragraph). Now the tooltip output is fixed to 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

From the tooltipster documentation (5.):

Important: if you have two tooltips that have the same data-tooltip-content attribute (that is to say, want to both use the same HTML element), please set the contentCloning option to true when you initialize your tooltips:

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