JQuery: Bootstrap popover のcontent htmlの手動セットとcloseボタン設置

bootstrap_popover_example.js

# samenames_html is html to display in popover
if (samenames_html.length > 0) {
  $("#popoverSameNames").popover({ 
    title: '同姓同名があります.<span class="close">&times;</span>',
    template: '<div class="popover" role="tooltip" style="width:500px;font-size:80%;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>',
    html: true
  }).on('shown.bs.popover', function(e){
    var popover = $(this);
    $(this).parent().find('div.popover .close').on('click', function(e){
      popover.popover('hide');
    });
  });
  $("#popoverSameNames").data('bs.popover').options.content = samenames_html;
  $("#popoverSameNames").popover('show');
} else {
  $("#popoverSameNames").data('bs.popover').options.content = "";
  $("#popoverSameNames").popover('hide');
}

以下を参照ください
https://smallmakeprgnote.wordpress.com/2015/03/28/jquery-bootstrap-popover-%E3%81%AEcontent-html%E3%81%AE%E6%89%8B%E5%8B%95%E3%82%BB%E3%83%83%E3%83%88%E3%81%A8close%E3%83%9C%E3%82%BF%E3%83%B3%E8%A8%AD%E7%BD%AE/