Bootstrap 的工具提示在鼠标悬停时将表单元格向右移动一点

我在我的项目中使用 Bootstrap 3.1.1。我表中的每个单元格都包含像 000或 111这样的数据。在鼠标悬停时，我希望将此数据显示为工具提示。到目前为止，这是有效的。然而，当我悬停在一个 <td>上时，所有相邻的细胞都向右移动。

这是我的 JSFiddle

<table class="table">
<thead>
<tr>
<th class="matrisHeader">
&nbsp;
</th>
<th data-original-title="111"
data-toggle="tooltip" data-placement="bottom" title="">
PÇ1
</th>
<th data-original-title="222"
data-toggle="tooltip" data-placement="bottom" title="">
PÇ2
</th>
<th data-original-title="333" data-toggle="tooltip"
data-placement="bottom" title="">
PÇ3
</th>
<th data-original-title="444"
data-toggle="tooltip" data-placement="bottom"title="">
PÇ4
</th>
</tr>
</thead>
<tbody>
<tr>
<th data-original-title="555" data-toggle="tooltip" data-placement="bottom"
title="">
ÖÇ1
</th>
<td data-original-title="666"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="777"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="888"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="999"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
</tr>
<tr>
<th data-original-title="000" data-toggle="tooltip"
data-placement="bottom" title="">
ÖÇ2
</th>
<td data-original-title="aaa"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="bbb"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="ccc"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="ddd"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
</tr>
<tr>
<th data-original-title="eee" data-toggle="tooltip" data-placement="bottom"
title="">
ÖÇ3
</th>
<td data-original-title="fff"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="ggg"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="hhh"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
<td data-original-title="iii"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>
</tr>
</tbody>
</table>
51245 次浏览
小开
最佳答案

您必须按照文档添加 data-container="body"。

<td data-original-title="999" data-container="body"
data-toggle="tooltip" data-placement="bottom" title="">
&nbsp;
</td>

Http://jsfiddle.net/ueqf2/2/

小开

您可以这样设置“数据容器”:

// initalize boostrap tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
})
})
小开

Bryce Easley 的回答是正确的，但是我不得不遵循这个 Ngx-bootstrap 的角度 

<td
container="body"
tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
triggers="click">icon
</td>

Https://valor-software.com/ngx-bootstrap/#/tooltip#append-to-body


提交答案