Add bootstrap tooltip on content returned by jsGrid itemTemplete function

Question

I have been trying this for hours now unsuccessfully but I cant find any way to implement a Bootstrap tooltip functionality in jsGrid. The jsGrid's itemTemplate does return me html in cell but using the title how can I implement the tooltip. Here is the code for itemTemplate.

                    name: "sub_status",
                    type: "select",
                    title: "Statut",
                    valueField: "Id",
                    textField: "Name",
                    items: [],
                    valueType: "string",
                    width: 35,
                    css: "text_small",
                    filtercss: "sub-status-filter",
                    itemTemplate: function (value, item) {

                        var retention_color = "";
                        var cc_tag = "";
                        var locked_tag = "";
                        var flowNote = "";



                        if (item.completed == 0 || 2) {
                            if(item.flow_note !== null && item.flow_note !== '' ) {
                                flowNote = '<td style="border:none;  float:right;" class="text_regular tint_red flow_note" data-toggle="tooltip" id="flowNote_' + item.flow_item_id + '"  data-flow-item-id="'+ item.flow_item_id +'" data-placement="top" title="'+ item.flow_note + '"  ><i class="fa fa-info-circle" aria-hidden="true"></i></td>';
                            }
                        }

                        return '<center style="position:relative;">' +
                            '<table>' +
                            '<tr align="center" class="flow-item" id="flowItem_' + item.flow_item_id + '" data-flow-item-id="'+ item.flow_item_id +'">' +
                            '<td   width="80%" style="border:none; ">' +
                            item.sub_status_name +  flowNote +
                            '</td>' +
                            '</tr>' +
                            '</table>'+
                            '</center>';

In my $(document).ready I am trying $('[data-toggle="tooltip"]').tooltip(); but no luck

Answer 1

Found a workaround using the qTip library by adding hasToolTip class to the tag like below

flowNote = '<td style="border:none;  text-align:right;" class="text_regular tint_red"  >' +
                                    '<span class="hasToolTip"><i class="fa fa-comment-o" aria-hidden="true"></i></span>' +
                                    '<div class="hidden text_medium"> <span class="text_medium">'+item.flow_note+'</span></div>' +
                                    '</td>';

and then using jQuery I did

$("#jsGrid").on('mouseover', '.hasToolTip', function(event) {

    $(this).qtip({
        content: {
            text: $(this).next('div').html()
        },
        hide: {
            event: 'click unfocus mouseout',
            effect: function(offset) {
                $(this).slideUp(100);
            }
        },
        show: {
            solo: true,
            event: 'mouseover',
            ready: true,
            target: $(this),
            effect: function(offset) {
                $(this).slideDown(50);
            }
        },
        position: {
            my: 'center left',
            at: 'center right',
            target: $(this),
            //viewport: $(window),
            adjust: {
                x: 5,
                y: 0,
                resize: true
            }
        },
        style: {
            classes: 'tooltip qtip-rounded',
            tip: { // Requires Tips plugin
                corner: true, // Use position.my by default
                mimic: false, // Don't mimic a particular corner
                width: 8,
                height: 8,
                border: true, // Detect border from tooltip style
                offset: 0 // Do not apply an offset from corner
            }
        }
    }, event);

});