Bootstrap Tooltip with HTML Anchor

How to create a bootstrap tooltip with an html anchor and tooltip stays open.

by Geoffrey Bourne

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br><br>
<span id="tip_nolink" rel="tooltip" title="This is regular tip."> Non-Anchored ToolTip </span>

<br><br><br>
<span id="tip" data-trigger="" rel="tooltip" data-html="true" title="This is the <a href= &quot; https://www.google.com &quot; target=‘_blank’ rel=‘noopener’>tip</a>."> Anchored ToolTip </span>

JavaScript

/**
  * For tooltips with links, don't remove hover until click somewhere else or open another tooltip
  */
 $(document).ready(function() {
   $('[rel="tooltip"]').tooltip({
     container: 'body'
   });
 });

 $(function() {
   // Show tooltip with html link 
   $('#tip').on("mouseover", function() {
     $('#tip').tooltip('show');
   });

   // If open any other tooltip, close the one with the link.
   $('[rel="tooltip"]').not('#tip').on("mouseover", function() {
     $('#tip').tooltip('hide');
   });

   // If click any where hide tooltip with link
   $(document).click(function() {
     $('#tip').tooltip('hide');
   });
 });