JSFiddle - React, Tailwind, and code Playground

by Annie Lagang

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>

<div id="list-popover" class="hide">
  <ul class="nav nav-pills nav-stacked">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS

a[rel="popover"]{
    display: inline-block;
    margin: 20px;
}

JavaScript

$('[rel="popover"]').popover({
        container: 'body',
        html: true,
        content: function () {
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        }
    }).click(function(e) {
        e.preventDefault();
    });