jquery Bootstrap 4工具提示卡在使用Datatables.net

axr492tv 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(116)

**场景：**通过服务器端处理加载数据表网格。在标题列上设置工具提示。当鼠标悬停时，将显示工具提示。
**问题：**我得到了tooltip工作。但发现了一个我解决不了的问题

1.将鼠标悬停在其中一个标题上，这将显示工具提示
x1c 0d1x的数据
1.将鼠标悬停在标题上，使用键盘将显示10条记录更改为25条记录。

的
1.加载记录后，工具提示将粘在屏幕上。

的
下面是我的代码片段

var table = $('#list-of-product').DataTable({
            "processing": true,
            "serverSide": true,
            "info": true,
            "stateSave": false,
            "bFilter": false,
            "drawCallback": function (settings, json) {
                $('[data-toggle="tooltip"]').tooltip('update');
                //$("#list-of-product tbody tr > td").tooltip('hide');
            },
            "ajax": {
                "url": "@Url.Action("GetProducts", "LandingPage")",
                "type": "POST"
            },
            "language": {
                "paginate": {
                    "previous": "<<",
                    "next": ">>"
                },
                "info": "Showing _START_ to _END_ of _TOTAL_",
                "lengthMenu": "Show _MENU_",
                "search": "",
                "searchPlaceholder": "Search..."
            },
            "columns": [
                            { "data": "LineOfBusiness", "orderable": true },
                            { "data": "Discipline", "orderable": true },
                            { "data": "InventoryProgram", "orderable": true },
                            { "data": "ISBN13", "orderable": true },
                            { "data": "Title", "orderable": true },
                            { "data": "ProductID", "orderable": true },
                            {
                                data: null,
                                className: "text-center",
                                defaultContent: '<a href="#list-of-product" data-toggle="modal" data-target="#ContactAssigner"><i class="material-icons">assignment_ind</i></a>',
                                "orderable": false
                            }
            ],
            "order": [[0, "asc"]],
            createdRow: function (row, data, dataIndex) {
                $(row).find('td:eq(4)').attr('title', data["Title"]);
                $(row).find('td:eq(4)').attr('data-toggle', "tooltip");
                //$(row).find('td:eq(4)').tooltip();
            }
        });

字符串
任何建议都将是有益的。- 谢谢-谢谢

jquery

来源：https://stackoverflow.com/questions/49029923/bootstrap-4-tooltip-stuck-using-datatables-net

2条答案

按热度按时间

tjvv9vkg1#

您需要挂钩到这个页面大小更改事件，然后隐藏任何打开的工具提示。

$('#list-of-product').on('length.dt', function (e, settings, len) {
    $('[data-toggle="tooltip"]').tooltip('hide');
});

字符串
Demo on Codeply
drawCallback事件不会很好地工作，因为它是在init上调用的，并且在表更新的任何时候都可以调用，此时可能没有必要隐藏所有的工具提示。

赞(0）回复(0）举报 2023-08-04

izj3ouym2#

对于Bootstarp弹出窗口使用

dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "lengthMenu": [[50, -1], [50, "All"]],
            order: [[1, 'desc']],
            fnDrawCallback: function () {
                $('[data-toggle="popover"]').popover();
                $('[data-toggle="popover"]').popover('hide');
            },
            "language": {
                "emptyTable": "No Records Founds"
            },
            "ordering": false,
            buttons: [
                { extend: 'csv', title: 'Support Portal', className: 'btn-sm' },
                { extend: 'pdf', title: 'Support Portal', className: 'btn-sm' },
                { extend: 'print', className: 'btn-sm' }
            ]
        });```

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery Bootstrap 4工具提示卡在使用Datatables.net

2条答案

相关问题

热门标签

最新问答