Bootstrap 3.0 Popover Sample

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div id="appendTarget"></div>

<ul id="popover-content" class="list-group" style="display: none">
</ul>

JavaScript

var isMyPopoverShown = false;

function myPop(element) {
  if(isMyPopoverShown === false) {
    $(element).popover({
        html: true,
        content: function() {
            $('#popover-content').html('<li><a href="#" class="btn btn-secondary">Edit</a></li>'
                                        +'<li><a href="#" class="btn btn-info">Activate</a></li>'
                                        +'<li><a href="#" class="btn btn-danger">Delete</a></li>');
            return $('#popover-content').html();
        }
    });
  }  
  $(element).popover('toggle');
}

jQuery(document).ready(function() {
   $('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">Item' + 
    '</div>' +
    '<div class="col-md-3"><button class="btn" style="margin-bottom: 10px" onclick="myPop(this);" data-trigger="manual"><b style="color: red">Button</b></button></div>');
    
  $(".btn").on('shown.bs.popover',function(){
    isMyPopoverShown = true;
  });

});