JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<br>
<br>
<button id="example" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Short content">Click to toggle fixed width popover</button>
<br>
<br>
<button id="example2" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Short content">Click to toggle fixed width popover</button>
<br>
<br>
<button id="example3" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="Short content">Click to toggle default popover</button>

CSS

.app-popover-fw { width: 276px; }

JavaScript

var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';

$('#example').popover({template: newPopoverTemplate });
$('#example2').popover({template: newPopoverTemplate });
$('#example3').popover();