J'utilise Bootstrap 3.1.1 pour mon projet. Chaque cellule de mon tableau contient des données telles que 000
ou 111
. En vol stationnaire, je souhaite afficher ces données sous forme d’info-bulle. Jusqu'à présent, cela fonctionne. Cependant, quand je survole un <td>
, toutes les cellules adjacentes se déplacent vers la droite.
<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>
Vous devez ajouter le data-container="body"
selon la documentation.
<td data-original-title="999" data-container="body"
data-toggle="tooltip" data-placement="bottom" title="">
</td>
Vous pouvez définir le "conteneur de données" de cette manière:
// initalize boostrap tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
})
})