bootstrap的popover呈现table

效果如下图：

原生的popover只支持 静态内容，此示例中的table是动态渲染的，需要对部分源码稍作调试。

POPOVER插件调整如下：

+function ($) {
    "use strict";

    // POPOVER PUBLIC CLASS DEFINITION
    // ===============================

    var Popover = function (element, options) {
       
        this.init('popover', element, options)
    }

    if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')

    Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
        placement: 'auto'
        , trigger: 'click'
        , title:'',
        , html: true
        , container: 'body'
        , content: ''
        , template: '<div class="popover"><div class="arrow"></div><div class="popover-title  clearfix"><h3 class="pull-left"></h3><span   class="btn-close pull-right  fa fa-window-close"></span></div><div class="popover-content"></div></div>'
    })
    // NOTE: POPOVER EXTENDS tooltip.js
    // ================================
    Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)
    Popover.prototype.constructor = Popover
    Popover.prototype.getDefaults = function () {
        return Popover.DEFAULTS
    }
    Popover.prototype.setContent = function () {
        var $tip = this.tip()
        var title = this.getTitle()
        var content = this.getContent()

        $tip.find('h3', '.popover-title')[this.options.html ? 'html' : 'text'](title)
        $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)

        $tip.removeClass('fade top bottom left right in')
         
        // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
        // this manually by checking the contents.
        if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
        $tip.find('.fa-window-close').click(function () {
            $tip.removeClass("in");
        });
    }

    Popover.prototype.hasContent = function () {
        return this.getTitle() || this.getContent()
    }

    Popover.prototype.getContent = function () {
        var $e = this.$element
        var o = this.options

        return $e.attr('data-content')
            || (typeof o.content == 'function' ?
                o.content.call($e[0]) :
                o.content)
    }

    Popover.prototype.arrow = function () {
        return this.$arrow = this.$arrow || this.tip().find('.arrow')
    }

    Popover.prototype.tip = function () {
        //20201119
        if (!this.$tip) this.$tip = this.options.template == 'function' ? this.options.template: $(this.options.template)
        return this.$tip
    }


    // POPOVER PLUGIN DEFINITION
    // =========================

    var old = $.fn.popover

    $.fn.popover = function (option) {
        return this.each(function () {
            var $this = $(this)
            var data = $this.data('bs.popover')
            var options = typeof option == 'object' && option

            if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
            if (typeof option == 'string') data[option]()
        })
    }

    $.fn.popover.Constructor = Popover


    // POPOVER NO CONFLICT
    // ===================

    $.fn.popover.noConflict = function () {
        $.fn.popover = old
        return this
    }

}(window.jQuery);

bootstrap.css调整如下：

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    min-width:150px;
    max-width: 500px; /* 276px;*/
    padding: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    line-break: auto;
}
    .popover .btn-close {
       cursor:pointer;
       margin-top:2px;
    }
    .popover .btn-close:hover {
      color:red;
    }

    .popover.top {
        margin-top: -10px;
    }

    .popover.right {
        margin-left: 10px;
    }

    .popover.bottom {
        margin-top: 10px;
    }

    .popover.left {
        margin-left: -10px;
    }

.popover-title {
    padding: 6px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}
    .popover-title h3 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .popover-content {
        padding: 8px 6px;
    }

因为仅仅优化了插件 和 样式，因此使用方法与原生用法一样，简单演示如下 ：

<!--这是动态内容模板-->
<div id ="appsms">
这里放table动态内容，如果你显示其他内容也可以,内容可以使用模板引擎，这不是本文重要不多说明</div>

<!--这是触发popover的按钮，这里仅仅是演示，具体如何使用根据您的情况而定-->
<button   onclick="testPopover(this)">
</button>



<script>
    function testPopover(o) {
        let _this = $(o);
        _this.popover({
            title: "选择通道",
            content: function () { return $("#appsms") }
        });
        _this.popover('show');
    }
    //.popover("hide");//隐藏
    //.popover("show");//显示，这个都是原插件的事件，具体使用请查看插件文档
</script>