Bootstrap 3工具提示转移右侧单元格 - 这是一个错误吗?

时间:2017-07-18 21:54:37

标签: jquery css twitter-bootstrap

如果将Bootstrap 3工具提示分配给表格单元格。显示工具提示时,工具提示单元格的右侧单元格向右移动一个位置。是这个错误还是其他的?



$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Tooltip Example</h3>
  <table>
  <thead>
    <tr>
      <th data-toggle="tooltip" title="AAA titl">AAA</th>
      <th data-toggle="tooltip" title="BBB title">BBB</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
  </tbody>
  </table>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

将此代码放入js

$('[rel=tooltip]').tooltip({container: 'body'});

这是您的<th>代码

data-container="body"

查看代码段

&#13;
&#13;
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
    $('[rel=tooltip]').tooltip({container: 'body'});
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Tooltip Example</h3>
  <table>
  <thead>
    <tr>
      <th data-toggle="tooltip" title="AAA titl" data-container="body">AAA</th>
      <th data-toggle="tooltip" title="BBB title">BBB</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
  </tbody>
  </table>
</div>
&#13;
&#13;
&#13;