templated-popover.html

<!-- Somewhere in the page -->
<a href="#popover-tip-1" data-toggle="popover">What do I do here?</a>

<!-- Somewhere else in the page -->
<div id="popover-tip-1">
  <h3>Version number?</h3>
  <p><i>Nueva</i> expects you to use <a href="http://semver.org">semantic versioning</a>.</p>
  <p>Some valid examples:
    <ul>
      <li>0.0.1</li>
      <li>0.1.0</li>
      <li>1.0.0-alpha1</li>
    </ul>
  </p>
</div>

<!-- Somewhere in the end of the page -->
<script>
  $('[data-toggle="popover"]').each(function() {
    var contentSelector = $(this).prop('href');
    $(this).data('content', $(contentSelector).html());
    $(this).popover({ html: true });
    
    // If you don't want to keep those nodes around...
    $(contentSelector).remove();
  });
</script>