数据表和引导工具提示答案

【问题标题】：Datatables and bootstrap tooltips数据表和引导工具提示
【发布时间】：2017-01-07 11:57:29
【问题描述】：

我正在向我的 Rails 应用程序添加数据表。我大部分时间都在工作，但我陷入了 CSS / jQuery 问题。我有一个行单元格定义如下：

content_tag(:abbr, "#{record.od} mm", data: { container: 'body', toggle: 'tooltip', placement: 'bottom', html: 'true' }, title: 'test' )

呈现：

<abbr data-container="body" data-toggle="tooltip" data-placement="bottom" data-html="true" title="test">88.9 mm</abbr>

在非数据表中，引导工具提示工作正常，但在数据表上失败。根据我的经验，我认为这是因为数据表是在主体完成等之后呈现的。

经过一番挖掘后，我尝试了这个：

$ ->
  $('#table').dataTable
    ajax: 
      url: myurl
    processing: true
    serverSide: false
    responsive: true
    'fnCreatedCell': (nTd, sData, oData, iRow, iCol) ->
      $(nTd "abbr").tooltip()

这几乎可以工作......几乎是因为我得到了一个工具提示，但我猜它是一个数据表工具提示与引导工具提示：

忘记工具提示内容 - 格式等是问题所在。非引导工具提示也需要更长的时间才能淡入。

这里可能有一个简单的解决方法吗？

谢谢，

丹

【问题讨论】：

我可能会在工具提示中添加一个类（例如tooltip），然后在绘图回调中调用工具提示函数。我不太喜欢这个答案：stackoverflow.com/questions/39189856/…
尝试使用延迟：stackoverflow.com/questions/9958825/…
$('body').tooltip selector: '[data-toggle="tooltip"]' 成功了。如果您将此添加为实际答案，我会接受。

标签： jquery twitter-bootstrap datatables

【解决方案1】：

如 cmets 中所述，您可以使用selector option：

$('body').tooltip({selector: '[data-toggle="tooltip"]'});

这也适用于弹出框。

【讨论】：

【解决方案2】：

DataTables 每次重绘表格时都需要使用drawCallback 来初始化工具提示。

var table = $('#example').DataTable( {  
"drawCallback": function( settings ) {

$('[data-toggle="tooltip1"]').tooltip();
$('[data-toggle="tooltip2"]').tooltip();

// add as many tooltips you want

},
});

【讨论】：

这对我有用，但我只在[data-toggle="tooltip"] 上使用了一次运行.tooltip()（而不是为每个工具提示创建许多切换，它似乎工作得很好。
我改了responsive=false,xscroll=true，但是一直闪烁不知道为什么。请告诉我

【解决方案3】：

只有这对我有用

drawCallback: function () {
     $('body').tooltip({ selector: '[data-tooltip="tooltip"]' });
},

【讨论】：