数据表和引导工具提示

时间:2016-08-31 03:40:33

标签: jquery twitter-bootstrap datatables

我正在向我的Rails应用添加Datatables。我大部分时间都在工作,但我遇到了CSS / jQuery问题。我有一个行单元定义如下:

Sub

呈现:

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>

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

enter image description here enter image description here

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

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

谢谢,

3 个答案:

答案 0 :(得分:23)

如评论中所述,您可以使用selector option

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

这也适用于弹出窗口。

答案 1 :(得分:9)

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

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

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

// add as many tooltips you want

},
});

答案 2 :(得分:0)

这只对我有用

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