JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 
Note: Popover content and title is stored inside "example-popover-content" and "example-popover-title"
-->
<a id="example-popover"
   tabindex="0"
   class="btn btn-lg btn-info" 
   role="button" 
   data-trigger="focus">Example popover</a>

<div id="example-popover-content" class="hidden">
  <div>
    <b>Example popover</b> - content
  </div>
</div>

<div id="example-popover-title" class="hidden">
  <b>Example popover</b> - title
</div>

CSS

body {
    padding: 20px;
}

.hidden {
  display: none;
}

JavaScript

$(function(){
    // Enables popover
    $("#example-popover").popover({
        html : true, 
        content: function() {
          return $("#example-popover-content").html();
        },
        title: function() {
          return $("#example-popover-title").html();
        }
    });
});