JSFiddle - React, Tailwind, and code Playground

by User888

HTML

<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>
  <button class="btn"><span class="glyphicon glyphicon-send test"></span></button>
</div>

JavaScript

$('.test').on("click", function(event) {
  event.preventDefault();
  $(this).popover({
    html: true,
    trigger: 'click',
    content: '<div><b>a test message</b><div>',
    placement: 'right',
    title: 'test title <a href="#" class="pull-right x-popover-close" title="close">X</a>'
  });

  $(this).on('shown.bs.popover', function(e) {
    $(".x-popover-close").on('click', function(e1) {
      $(this).parents(".popover").popover('hide');
      e1.stopPropagation();
    });
  });
});