JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="pr-popover">
  <a class="topover">popover</a>
</div>

CSS

.margin0 {margin:0;}
.pr-popover {position: relative;width:150px;margin:50px auto;cursor:pointer;}
.media-body {width: max-content;}
.popover {max-width: unset!important;border-radius: 0px;padding: 10px;border: 0;}
.popover.top {left: -15px!important;width: max-content!important;background-color: #58595b;color: #FFF;}
.popover.top>.arrow {border-top-color: #58595b;bottom: -10px;left: 30px!important;}
.popover.top>.arrow:after {display: none;}
.popover-title {color: #FFF!important;font-size: 14px!important;font-weight: bold;background-color: transparent;padding: 0!important;border: 0;}
.popover-content {padding: 0;}
.popover.bottom {left: 0!important;width: max-content!important;background-color: #c36754;color: #FFF;}
.popover.bottom>.arrow {border-bottom-color: #c36754;top: -11px;left: 30px!important;}
.popover.bottom>.arrow:after {border-bottom-color: transparent;}

JavaScript

//popover
$(document).ready(function(){
  $('.topover').popover({
    placement : 'bottom',
    trigger : 'click',
    html : true,
    content : '<div class="media"><div class="media-body"><p class="margin0">Uploaded by</p><p class="margin0">BlackRock EMEA Fund Launch Team</p><p class="margin0"><small class="margin0 fff">Last Refreshed Date</small></p><p class="margin0">X/XX/XXXX</p></div></div>'
  });
});