JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<a class="first" href="#" class="btn" data-toggle="popover" data-placement="bottom" title="">Popover</a>
<a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="">Popover</a>

<a tabindex="0" class="btn first text-white d-inline-block w-25 p-3 rounded shadow bg-dark" role="button" data-toggle="popover" title="Blah" data-placement="bottom" data-content="blah blah blah"></a>

<a tabindex="0" class="btn text-white d-inline-block w-25 p-3 rounded shadow bg-dark" role="button" data-toggle="popover" title="Blah" data-placement="bottom" data-content="blah blah blah"></a>

CSS

body {
    padding: 50px;
}

JavaScript

$(document).ready(function(){
var mycontent = '<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

  $('.btn').popover({
    content:mycontent,
    trigger: 'manual'
  }).click(function(e) {
  	$(this).popover('toggle');
    e.stopPropagation();
  });

  $('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
  });
  
  $('.first').popover('show');
});