jQuery 数据表和引导工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39240361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables and bootstrap tooltips
提问by Dan Tappin
I am adding Datatables to my Rails app. I have it working for the most part but I am stuck on a CSS / jQuery issue. I have a row cell defined as follows:
我正在将数据表添加到我的 Rails 应用程序中。我大部分时间都在使用它，但我遇到了 CSS / jQuery 问题。我有一个行单元格定义如下：
content_tag(:abbr, "#{record.od} mm", data: { container: 'body', toggle: 'tooltip', placement: 'bottom', html: 'true' }, title: 'test' )
which renders:
呈现：
<abbr data-container="body" data-toggle="tooltip" data-placement="bottom" data-html="true" title="test">88.9 mm</abbr>
In a non-datatable table the bootstrap tooltip works fine but fails on the datatable. From experience I gather it's because the datatable is rendered after the body completes etc.
在非数据表中，引导工具提示工作正常，但在数据表上失败。根据我的经验，这是因为数据表是在主体完成等之后呈现的。
After some digging I tried this:
经过一番挖掘，我尝试了这个：
$ ->
$('#table').dataTable
ajax:
url: myurl
processing: true
serverSide: false
responsive: true
'fnCreatedCell': (nTd, sData, oData, iRow, iCol) ->
$(nTd "abbr").tooltip()
This almost works... almost because I get a tooltip but I am guessing it's a datatable tooltip vs the bootstrap tooltip:
这几乎有效......几乎是因为我得到了一个工具提示，但我猜这是一个数据表工具提示与引导工具提示：
Forget the tooltip content - the formatting etc. is the issue. The non-bootstrap tooltip also takes way longer to fade in.
忘记工具提示内容 - 格式等是问题。非引导工具提示也需要更长的时间才能淡入。
Is there perhaps an easy fix here?
这里可能有一个简单的解决方法吗？
Thanks,
谢谢，
Dan
担
回答by mgalgs
As mentioned in the comments, you can use the selectoroption:
如评论中所述，您可以使用该selector选项：
$('body').tooltip({selector: '[data-toggle="tooltip"]'});
This works for popovers too.
这也适用于弹出框。
回答by learnplus
You need to use drawCallbackto initialize tooltips every time DataTables redraws the table.
drawCallback每次 DataTables 重绘表格时，您都需要使用来初始化工具提示。
var table = $('#example').DataTable( {
"drawCallback": function( settings ) {
$('[data-toggle="tooltip1"]').tooltip();
$('[data-toggle="tooltip2"]').tooltip();
// add as many tooltips you want
},
});
