在jqgrid中显示bootstrap popover

Question

我试图显示一个弹出窗口，当单击列标题中的按钮时，该弹出窗口必须显示。使用引导表，弹出窗口在列标题上方很好。使用jqGrid（包free-jqgrid版本4.14.1），列标题的高度只会增加，但弹出窗口不会显示。

的jqGrid

$pages.jqGrid({
    url: '@Url.Action("SearchPages", "Catalogue")',
    datatype: 'json',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        postData['cat'] = '@ViewBag.Catalogue';
        postData['chapter'] = $("img.activechapter").attr("id");
        postData['page'] = $('#inputPage').val();
        postData['system'] = $('#ddSystem').val();
        postData['pageDescr'] = $('#inputDescr').val();
        postData['article'] = $('#inputArticle').val();
        postData['dNumber'] = $('#inputDNumber').val();
        return JSON.stringify(postData);
    },
    mtype: 'POST',
    colNames: ['<div>State<button id="btnInfo" class="infoButton" rel="info" title="Info" ><span class="glyphicon glyphicon-question-sign" ></span></button ></div >',
        'Mod Date', 'Files', 'Page A4', 'Edition', 'System A4', 'ID', 'Description A4', 'Art Info', 'InfoNewMod'],
    colModel: clm,
    beforeSelectRow: function (rowid, e) {
        return false;
    }
    //height: 500
});

将popover链接到按钮

$("#btnInfo").popover({
    trigger: 'click',
    placement: 'top',
    html: 'true',
    content: '<textarea class="popover-textarea"></textarea>',
    template: '<div class="popover">' +
    '<div class="arrow"></div>' +
    '<h3 class="popover-title"></h3>' +
    '<div><div><img src="/Content/images/pdf.gif" /><label>PDF - Click to open the PDF of the current released page</label></div>' +
    '<div><img src="/Content/images/dwg.gif" /><label>DWG - Click to download the DWG of the current released page</label></div>' +
    '<div><img src="/Content/images/Modified.ico" /><label>Modified - Click to open the PDF of the modified page</label></div>' +
    '<div><img src="/Content/images/New.ico" /><label>New - Click to open the PDF of the new page</label></div></div>' +
    '</div>'
})
.on('shown', function () {
    //hide any visible comment-popover
    $("[rel=info]").not(this).popover('hide');
    var $this = $(this);
    //attach link text
    $('.popover-textarea').val($this.text()).focus();
    //close on cancel
    $('.popover-cancel').click(function () {
        $this.popover('hide');
    });
    //update link text on submit
    $('.popover-submit').click(function () {
        $this.text($('.popover-textarea').val());
        $this.popover('hide');
    });
});

修改

在下图中，当点击问题按钮并且标题高度增加时显示结果，并显示弹出窗口的底部