jquery - Bootstrap 3 工具提示向右移动 - 这是一个错误吗？

Question

如果将 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>

Answer 1

将这段代码放入js

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

将此发送给您的<th>标签

data-container="body"

查看代码片段

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

<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>