twitter bootstrap 的工具提示问题答案

【问题标题】：Tooltip issue with twitter bootstraptwitter bootstrap 的工具提示问题
【发布时间】：2015-03-05 14:15:06
【问题描述】：

我使用twitter bootstrap 3 来显示tooltip

<td class = "skills" data-toggle="tooltip" data-placement="left" data-original-title="<?php echo $row['skills']; ?>"><?php echo $row['skills']; ?></td>

它显示得很好，但是当我将鼠标悬停在它上面时，它会将每个单元格向右移动。

如何解决？

我附上了两张快照，你可以看到它向右移动。

编辑

我在这里添加一个测试表，它的作用是在下一个td 中显示工具提示，并且该td 的数据向右移动。

<table id="example-table" class="table table-striped table-hover table-condensed">
    <thead>
        <th>Serial</th>
        <th>Name</th>
        <th>Rating</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="A">A</td>
          <td>php</td>
        </tr><tr>
          <td>2</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="B">B</td>
          <td>C#</td>
        </tr>
      </tbody>
    </table>

这里是js

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

【问题讨论】：

请在没有PHP的情况下包含更多代码HTML标记以重现问题小表。
@Danko 我也加了一个测试表sn-p，请看一下

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

从 CSS 中只需从正文或 HTML 标记中删除“位置：相对”。

它会很好地工作。

【讨论】：

【解决方案2】：

你需要在tooltip函数{container:'body', trigger: 'hover', placement:'left'}中使用一些属性

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table id="example-table" class="table table-striped table-hover table-condensed">
    <thead>
        <th>Serial</th>
        <th>Name</th>
        <th>Rating</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="A">A</td>
          <td>php</td>
        </tr><tr>
          <td>2</td>
          <td data-toggle="tooltip" data-placement="right" data-original-title="B">B</td>
          <td>C#</td>
        </tr>
      </tbody>
    </table>

【讨论】：

【解决方案3】：

不要直接用于 td 使用 span 标签希望它能起作用：

<table id="example-table" class="table table-striped table-hover table-condensed">
    <thead>
        <th>Serial</th>
        <th>Name</th>
        <th>Rating</th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td><span data-toggle="tooltip" data-placement="right" data-original-title="A">A</span></td>
          <td>php</td>
        </tr><tr>
          <td>2</td>
          <td><span data-toggle="tooltip" data-placement="right" data-original-title="B">B</span></td>
          <td>C#</td>
        </tr>
      </tbody>
    </table>

【讨论】：

【解决方案4】：

好的，问题是tooltip 默认插入在具有该属性的html 元素之后。由于工具提示是 div 元素正在破坏您的表格：

结构如下：

<td></td>
<div></div>
<td></td>

Wich 无效。您需要更改具有 tooltip 的容器的行为：

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

BootplyDemo

【讨论】：

【解决方案5】：

我找到了解决方案，只是在这里发布，以便有一天有人会发现这很有用。

所以，如果有人遇到这个问题，我的意思是如果在使用 twitter-bootstrap tooltip 时在悬停时移动数据并且按钮在悬停时弹跳，您只需要执行以下操作：上一页

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

只需要添加容器（在 bootstrap 2.3 中修复）

<script type="text/javascript">
   $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip({container: 'body'});   
   });
</script>

【讨论】：