Bootstrap de l'info-bulle se déplace cellules du tableau à droite un peu sur le vol stationnaire

Je suis en utilisant Bootstrap 3.1.1 pour mon projet. Chaque cellule de mon tableau contient des données comme 000 ou 111. Sur le vol stationnaire, je veux afficher ces données dans une info-bulle. Jusqu'à présent, cela fonctionne. Cependant, quand j'ai passez la souris sur un <td>, toutes les cellules adjacentes décalage vers la droite.

Voici mon 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>
InformationsquelleAutor zkanoca | 2014-02-21
  1. 126

    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="">
&nbsp;
</td>

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

    • Pourquoi Ne puis-je pas voir cette amorce de la documentation? Nice. Merci.
    • Je ne suis pas sûr que ça fait partie de bootstrap, je pense que c'est jQuery spécifiques. Consultez leur documentation.
    • C'est dans la partie est intitulée info-bulles dans des groupes de bouton d'entrée et de groupes de besoin réglage spécial ne pas mentionner expressément les tables, mais l'idée est si l'info-bulle des chevauchements, il sera en mesure de montrer, sans interférence.
    • Ce correctif ne fonctionne pas pour le contenu qui a été insérés dynamiquement dans la page.
    • Dans une grande <TABLE> avec info-bulle sur certains <TR>, j'ai eu le même problème de décalage qui fait ma page vraiment lent. Grâce à des données d'un container="corps", il fixe.
    InformationsquelleAutor Thunda
  2. 0

    Vous pouvez définir les données "conteneur" de cette façon:

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