zkanoca zkanoca - 3 months ago 14
CSS Question

Bootstrap's tooltip moves table cells to right a bit on hover

I am using Bootstrap 3.1.1 for my project. Each cell in my table contains data like

000
or
111
. On hover, I want to display this data as a tooltip. So far, this works. However, when I hover over a
<td>
, all adjacent cells shift to the right.

Here's my 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>

Answer

You have to add the data-container="body" as per documentation.

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

http://jsfiddle.net/uEqF2/2/