Showing bootstrap popover in jqgrid

Question

I'm trying to show a popover which has to show up when clicked on a button in column header. With the bootstrap table, the popover came good above the column header. With the jqGrid (package free-jqgrid version 4.14.1) the column header just increase in height, but the popover does not show up.

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
});

Link popover to button

$("#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');
    });
});

EDIT

In the image below the result is shown when the question button is clicked and the header grows in height and it shows the bottom of what would be the popover