Bootstrap Popover 自定义弹框布局

Bootstrap Popover 自定义弹框布局 点击“关闭”按钮弹框消失 点击其它地方不消失

项目要求：表格操作，每行点击“分享“按钮弹出框，弹框布局自定义，弹框标题出有“关闭“按钮，点击关闭popover才能消失，其它区域的点击不消失。但是做到最后发现有个问题：popover的显示隐藏是toggle，也就是说：btn点击后弹框显示，再点击弹框关闭按钮后隐藏，但是再次点击btn没反应，第三次才正常显示。

var html_ = "分享";
$('.share').html(html_);

动态添加布局。因为我的需求时table列表，每列都有一个按钮，所以这里会有一个问题：popover的启动方法，必须在button的事件监听事件里面加载 $(‘create-img’).popover(), 或者可以检索所有popover标签，根据自己的需求each循环加载 .popover()。

$(document).off('mouseover', '.create-img').on('mouseover', '.create-img', function (e) {
    var element = $(this);
    var id = element.attr('id');
    element.popover({
        trigger: 'click',
        placement: 'auto', //top, bottom, left or right
        title: Title(element),
        html: 'true',
        content: ContentMethod(element),
    });
    e.stopPropagation();//这行很重要
    element.on("shown.bs.popover", function (){          
        //将兄弟节点的同类标签的弹框隐
        element.parent().parent().siblings().find('[data-toggle="popover"]').popover('hide');
        //element.siblings().find('.popover-content');获取弹框的内容部分
    });
    element.on("hide.bs.popover", function () {
    //弹框隐藏式要进行的操作
    });
});

$(document).on('click', '.popover-title .close',function () {
    //点击“关闭“按钮隐藏弹框
    //

    //当popover显示的时候，会存在.in这个类。通过这个类来判断会更加准确。
    var popoverWasVisible = $(this).parent().parent().parent().hasClass('in');
    if(popoverWasVisible){
        element.popover('destroy');//当被销毁后，再次点击显示弹框，就不会出现“点击两次才出现的问题”
    }
})；

function ContentMethod(element) {
     var html_ = "";
     return html_;
}

function Title() {
    var html_ = "<div style='width: auto;height: 18px'><span style='float: left'>分享span><span class='close' style='float: right;font-size: 14px;color: #000;'>关闭span>div>"
    return html_;
}

效果图（还请见谅打了马赛克）：