JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<a class="btn btn-primary popover-container" id="popover" data-toggle="popover" data-placement="right" data-container="body" rel="log-popover">Log level</a>

CSS

.popover1 {
  color: white;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  width: 276px !important;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #008e96 !important;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 0px !important;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover1.right {
  margin-left: 10px;
}
.popover-content {
  padding: 9px 14px;
}
.popover1 > .arrow,
.popover1 > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  
}
.popover1 > .arrow {
  border-width: 11px;
}
.popover1 > .arrow:after {
  content: "";
  border-width: 10px;
  
}
.popover1.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, .25);
  border-left-width: 0;
  
}
.popover1.right > .arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #008e96 !important;
  border-left-width: 0;

}

JavaScript

$(document).ready(function() {
    
 	var popoverTemplate = ['<div class="popover1" role="tooltip">',
           '<div class="arrow"></div>',
           '<div class="popover-content">',
           '</div>',
           '</div>'].join('');
	                       
	var content = ['<p>content</p>',
                   '<p>more content</p>'].join('');
	
	$('body').popover({
		selector: '[rel="log-popover"]',
		trigger: 'click',
		content: content,
		template: popoverTemplate,
		placement: 'right',
		html: true,
		container: 'body',
	});   
});