在 jsGrid itemTemplete 函数返回的内容上添加 bootstrap 工具提示

Question

我已经尝试了好几个小时，现在都没有成功，但我找不到任何方法在 jsGrid 中实现 Bootstrap 工具提示功能。 jsGrid 的 itemTemplate 在单元格中 return 我 html 但使用标题我如何实现工具提示。这是 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>';

在我的 $(document).ready 中，我正在尝试 $('[data-toggle="tooltip"]').tooltip(); 但运气不好

Answer 1

通过将 hasToolTip class 添加到如下标签中，找到了使用 qTip 库的解决方法

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>';

然后使用 jQuery 我做了

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

});

在 jsGrid itemTemplete 函数返回的内容上添加 bootstrap 工具提示

Add bootstrap tooltip on content returned by jsGrid itemTemplete function

jquery

jsgrid