JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.min.css">
<p class="poped" data-title="Popover" data-content="Content" data-trigger="manual" data-placement="bottom" rel="popover">Lorem</p>

CSS

html, body { background: #EEF; }

.poped { width: 50px; margin: auto; }

JavaScript

var $poped = $('.poped');
$poped.popover();

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('click',function(e) {
            e.stopPropagation();
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});