场景:使用服务器端处理加载数据表网格。在标题列上设置工具提示。当鼠标悬停时,会显示工具提示。
问题:工具提示正常工作。但发现一个我无法解决的问题。
- 将鼠标悬停在其中一个显示工具提示的标题上
- 将鼠标悬停在标题上,使用键盘将显示 10 条记录更改为 25 条记录。
- 加载记录后,工具提示卡在屏幕上。
这是我的代码片段
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();
}
});
任何建议都会有所帮助。谢谢。
最佳答案
您需要挂接到此页面大小更改事件,然后隐藏所有打开的工具提示。
$('#list-of-product').on('length.dt', function (e, settings, len) {
$('[data-toggle="tooltip"]').tooltip('hide');
});
drawCallback
事件不会很好地工作,因为它在初始化时调用,并且在表更新时调用,此时可能不需要隐藏所有工具提示。
关于javascript - Bootstrap 4 工具提示卡住使用 Datatables.net,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49029923/