JSFiddle - React, Tailwind, and code Playground

by bob_js

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>

<div id="popover-content-a" class="hidden">
 <div>
  <h6><b>Heading</b></h6>
   <p>Content <a href="#">Click Me</a></p>
 </div>
</div>
<br>

<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>

<div id="popover-content-b" class="hidden">
 <div>
  <h6><b>Heading</b></h6>
   <p>Content <a href="#">Click Me</a></p>
 </div>
</div>

</div>

CSS

.circle-macro {
	border-radius: 50%;
    background-color: rgb(68, 104, 125);
    color: white;
    padding: 0 8px;
    font-family: 'Times New Roman';
    font-style: italic;
    z-index: 10;
    cursor: pointer;
}
.hidden{
  display: none;
}

JavaScript

$(function () {
  $("#popover-a").popover({
    html: true,
    content: function(){
      return $('#popover-content-a').html();     
    }
  });
  $("#popover-b").popover({
    html: true,
    content: function(){
      return $('#popover-content-b').html();     
    }
  });
})