如何向表头添加工具提示

我正在使用jQuery DataTables，并且我一直试图在过去2天内将工具提示添加到我的数据表的Header列中无济于事。

我在datatables网站上使用了示例，其中工具提示已添加到行数据中，但这不起作用。 我只看到一个工具提示，它甚至没有得到列的标题。

下面是我到目前为止的代码。

if (oTable != null) { oTable.fnClearTable(); oTable.fnAddData(columnData); } else { oTable = $('#caseDataTable').dataTable({ "bDestroy": true, "aaData": columnData, "aoColumnDefs": columnNames, bFilter: true, bAutoWidth: true, autoWidth: true, "responsive": true, dom: 'Bfltip', buttons: [ { extend: 'colvis', postfixButtons: ['colvisRestore'], collectionLayout: 'fixed two-column' } ], "fnDrawCallback": function() { if (typeof oTable != 'undefined') { $('.toggleCheckBox').bootstrapToggle({}); } $('#caseDataTable thead tr').each(function () { var sTitle; var nTds = $('td', this); var columnTitle= $(nTds[0]).text(); this.setAttribute('title', columnTitle); }); /* Apply the tooltips */ $('#caseDataTable thead tr[title]').tooltip({ "delay": 0, "track": true, "fade": 250 }); } }); } 

Answer 1

原因

您的代码存在多个问题：

• 你有不正确的CSS选择器，你应该针对th元素，而不是tr 。
• initComplete是一个适当的地方，因为你只需要做一次。

DEMO

我的下面示例是Bootstrap Tooltip。 相应地调整您的工具提示插件。

 $(document).ready(function() { var table = $('#example').DataTable( { "ajax": 'https://api.myjson.com/bins/qgcu', "initComplete": function(settings){ $('#example thead th').each(function () { var $td = $(this); $td.attr('title', $td.text()); }); /* Apply the tooltips */ $('#example thead th[title]').tooltip( { "container": 'body' }); } }); }); 

        
 
 
 
Name
 
Position
 
Office
 
Salary
 
Start Date
 
 
 
 
 
Name
 
Position
 
Office
 
Salary
 
Start Date
 
 
  

Answer 2

我会尝试移动

  /* Apply the tooltips */ $('#caseDataTable thead tr[title]').tooltip({ "delay": 0, "track": true, "fade": 250 }); 

在fnDrawCallback之外

 if (oTable != null) { oTable.fnClearTable(); oTable.fnAddData(columnData); } else { oTable = $('#caseDataTable').dataTable({ "bDestroy": true, "aaData": columnData, "aoColumnDefs": columnNames, bFilter: true, bAutoWidth: true, autoWidth: true, "responsive": true, dom: 'Bfltip', buttons: [ { extend: 'colvis', postfixButtons: ['colvisRestore'], collectionLayout: 'fixed two-column' } ], "fnDrawCallback": function() { if (typeof oTable != 'undefined') { $('.toggleCheckBox').bootstrapToggle({}); } $('#caseDataTable thead tr').each(function () { var sTitle; var nTds = $('td', this); var columnTitle= $(nTds[0]).text(); this.setAttribute('title', columnTitle); }); } }); /* Apply the tooltips */ $('#caseDataTable thead tr[title]').tooltip({ "delay": 0, "track": true, "fade": 250 }); }