javascript - Bootstrap 工具提示将我右侧的内容推开

Question

我在表格的第二列中添加了工具提示，但它把我的最后一列推开了。

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

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