Ich verwende Bootstrap 3.1.1 für mein Projekt. Jede Zelle in meiner Tabelle enthält Daten wie 000
oder 111
. Beim Hover möchte ich diese Daten als Tooltip anzeigen. Bisher funktioniert das. Wenn ich jedoch über a schwebe <td>
, verschieben sich alle benachbarten Zellen nach rechts.
<table class="table">
<thead>
<tr>
<th class="matrisHeader">
</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="">
</td>
<td data-original-title="777"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
<td data-original-title="888"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
<td data-original-title="999"
data-toggle="tooltip" data-placement="bottom" title="">
</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="">
</td>
<td data-original-title="bbb"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
<td data-original-title="ccc"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
<td data-original-title="ddd"
data-toggle="tooltip" data-placement="bottom" title="">
</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="">
</td>
<td data-original-title="ggg"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
<td data-original-title="hhh"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
<td data-original-title="iii"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
</tr>
</tbody>
</table>
javascript
jquery
html
css
twitter-bootstrap
zkanoca
quelle
quelle
Sie können den "Datencontainer" folgendermaßen einstellen:
// initalize boostrap tooltip $(function () { $('[data-toggle="tooltip"]').tooltip({ container: 'body' }) })
quelle