Question

我正在使用带有引导工具提示的较旧版本的dataTables，并且工作正常。升级到dataTables 1.9之后，工具提示的内容将直接注入TH中，该TH应该在悬停时应用了工具提示。我没有看到原始的TH内容-我看到的是工具提示内容当我超过TH时，工具提示内容会在弹出的工具提示中正常显示。

为了符合我们的编码标准，我需要使用引导程序工具提示，而不是较新的dataTables工具提示，我认为这可能是导致问题的原因。

 <thead>
   <tr>
    <th data-role="tooltip" data-title="seo mapping tool tip 1" class="col-sm-1">Mapping</th>
    <th data-role="tooltip" data-title="analytics tool tip 2" class="col-sm-1">Analytics Title Variable</th>
    <th data-role="tooltip" data-title="seo title content tooltip 3" class="col-sm-1">Analytics Title Content</th>
    <th data-role="tooltip" data-title="meta title variable tooltip 4" class="col-sm-1">Meta Title Variable</th>
    <th data-role="tooltip" data-title="meta title content variable tooltip 5" class="col-sm-1">meta title content</th>
    <th data-role="tooltip" data-title="seo meta description tool tip 6" class="col-sm-1">meta description</th>
    <th data-role="tooltip" data-title="seo meta description content tool tip 7" class="col-sm-1">meta description content</th>
    <th data-role="tooltip" data-title="seo meta keyword tool tip 8" class="col-sm-1">meta keyword</th>
    <th data-role="tooltip" data-title="seo meta keyword content tool tip 9" class="col-sm-1">meta keyword content</th>
   </tr>
  </thead>
   <tbody>
     <tr>
      <td>some mapping</td>
      <td>analytics title variable</td>
      <td>analytics title content</td>
      <td>meta title variable</td>
      <td>meta title content</td>
      <td>meta description variable</td>
      <td>meta description content</td>
      <td>meta keywords</td>
      <td>meta keywords content</td>
     </tr>
   </tbody>

<!-- snipped -->
<script>
 $( document ).ready(function() {
  $("th").tooltip({
    container: 'body'
  });
 });

</script>

我尝试过

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

没有效果。

Answer 1

我有一些可行的方法...仍然不知道为什么会出现此问题，但是我找到了一种解决方法：

我在每个TH中都添加了我想输入的文本的数据内容。然后我在我的dataTable中添加了一个drawCallback函数

 $(".seoReport").DataTable({
    "bPaginate": false,
    "bFilter": false,
    "drawCallback": function( settings ) {
     $(".seoReport th").each(function(){
      $(this).text($(this).data("content"));
     })
    }
  });

这解决了问题……有点hack。首先建议如何防止工具提示抢劫TH。

升级jQuery数据表后，引导工具提示无法正常工作

1 个答案: