bootstrap移动到td上弹窗显示内容

您可以使用Bootstrap的Tooltip组件来实现将内容显示在鼠标悬停在td元素上时弹出的提示框中。以下是示例代码：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td data-toggle="tooltip" data-placement="top" title="Tooltip on top">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td data-toggle="tooltip" data-placement="top" title="Tooltip on top">Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td data-toggle="tooltip" data-placement="top" title="Tooltip on top">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

在上面的示例中，我们将`data-toggle="tooltip"`添加到td元素中，这将告诉Bootstrap要在上面添加一个提示框。我们还添加了`data-placement="top"`，这将使提示框在td元素的顶部弹出。最后，我们还添加了`title`属性，该属性的值将显示在提示框中。

在JavaScript部分，我们使用jQuery选择所有具有`data-toggle="tooltip"`属性的元素，并调用`tooltip()`方法来激活Bootstrap的Tooltip组件。这将使提示框在鼠标悬停在元素上时弹出。