引导工具提示将我右侧的内容推开答案

【问题标题】：Bootstrap tooltip pushed my right side contents away引导工具提示将我右侧的内容推开
【发布时间】：2019-07-27 17:51:49
【问题描述】：

我在表格的第二列中添加了tooltip，但它正在将我的最后一列推开。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

【问题讨论】：

Bootstrap's tooltip moves table cells to right a bit on hover的可能重复
在某处阅读：您需要在 td 中创建一个元素并对其应用工具提示，因为工具提示本身就是一个 div，当它放在 td 元素之后时，它会破坏表格布局。

标签： javascript jquery twitter-bootstrap tooltip

【解决方案1】：

您可以通过这种方式在您的 HTML 中添加data-container="body"：

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

或者可以通过这种方式将{container: 'body'}添加到你的JavaScript中：

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

编辑：

如果您希望 tooltip 出现在文本上而不是 td 上，您可以创建像 span 这样的内部元素并在该项目上添加 tooltip。试试这个方法：

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>
          <span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</span>
        </td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td>
          <span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</span></td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Doe</td>
        <td>john@example.com</td>
      </tr>

    </tbody>
  </table>


</div>

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

</body>
</html>

只需添加data-container="body"

<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>

【讨论】：

感谢您的回答，但我的工具提示出现在 td 中心，我希望它来自文本中心。

【解决方案3】：

试试这个方法：

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</p></td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</p></td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

【讨论】：

感谢您的回答，但我的工具提示出现在 td 中心，我希望它来自文本中心。

【解决方案4】：

编辑<tbody>点赞

    <tbody>
  <tr data-toggle="tooltip">
    <td>Default</td>
    <td  data-placement="top" title="Hooray!">Defaultson</td>
    <td>def@somemail.com</td>
  </tr>      
  <tr class="success" data-toggle="tooltip">
    <td>Success</td>
    <td  data-placement="top" title="Hooray!">Doe</td>
    <td>john@example.com</td>
  </tr>
</tbody>

这个。将data-toggle="tooltip"放入<tr>标签

【讨论】：