JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="pull-right top-buffer">
    <div class="col-xs-12">
        <div href="#" id="popover1" class="btn btn-default poper" data-placement="left">the popover link
            <div id="popover-head" class="hide">
                 <h1>This is the title 1</h1>

            </div>
            <div id="popover-content" class="hide">
                <p>This is a test 1</p>
            </div>
        </div>
    </div>
    <div class="col-xs-12 top-buffer">
    <div href="#" id="popover2" class="btn btn-default poper" data-placement="left">the popover link
        <div id="popover-head" class="hide">
             <h1>This is the title 2</h1>

        </div>
        <div id="popover-content" class="hide">
            <p>This is a test 2</p>
        </div>
    </div>
    </div>
</div>

CSS

.hide {
    display:none
}
.top-buffer {
    margin-top:30%
}

JavaScript

$(document).ready(function () {
    $('.poper').popover({
        html: true,
        title: function () {
            //alert($("#popover-head",this).html());
            return $("#popover-head", this).html();
        },
        content: function () {
            return $("#popover-content", this).html();
        }
    });
});