web-dev-qa-db-fra.com

Comment faire en sorte que l'info-bulle bootstrap 3 fonctionne avec une div parente avec overflow: hidden?

Voici mon code:

HTML:

<div class="cart">
   <a data-toggle="tooltip" title="add to cart">
       <i class="fa fa-cart"></i>
   </a>
</div>

JQuery :

 $('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom'
});

CSS:

.cart{
   overflow:hidden;
   padding:10px 3px;
}

Lorsque je survole l'icône du panier, l'info-bulle s'affiche, mais ce n'est pas en haut de la boîte.

Comment puis-je réparer cela?

jquerycsstwitter-bootstrap
12
Peter Jack

Vous pouvez utiliser l'attribut container pour que l'info-bulle elle-même soit placée dans le conteneur parent ou dans l'élément body de l'événement et qu'elle ne se dissipe pas avec un dépassement de capacité masqué, car elle sera positionnée de manière absolue.

$('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom',
   container: 'body'
});
35
Vytautas Butkus

Vous pouvez également simplement ajouter data-container = "body" à l'élément tooltipped. Par exemple. <button type="submit" title="Add Record to Book Bag" data-toggle="tooltip" data-container="body" aria-role="button"> ... </button>

0
Claas Kazzer

Comme @Morpheus l'a suggéré - n'utilisez pas overflow:hidden. Faites-vous cela comme une astuce de nettoyage du flotteur? Si c'est le cas, utilisez l'autre hack de clearfix en utilisant un pseudo-élément. ( http://www.webtoolkit.info/css-clearfix.html )

Alternativement, si vous devez utiliser overflow:hidden et que vous utilisez Tooltip v3, il existe une option appelée container qui permet de spécifier un sélecteur auquel l'élément d'infobulle sera ajouté.

http://getbootstrap.com/javascript/#tooltips

0
Adam