Wie Bootstrap 3 Tooltip Arbeit mit Eltern Div mit Überlauf: versteckt?

Hier ist mein Code:Wie Bootstrap 3 Tooltip Arbeit mit Eltern Div mit Überlauf: versteckt?

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; 
}

Wenn ich das Einkaufswagensymbol schwenke, wird der Tooltip angezeigt, aber er befindet sich nicht oben im Warenkorb.

Wie kann ich das beheben?

Quelle

2013-10-28 Peter Jack

Fix - nicht verwenden 'Überlauf: hidden' – Morpheus

, wenn Sie es wünschen oben auf das Symbol, dann verwenden palcement 'top', oder pls zeigen ein Bild der Ausgabe –

Hier ist ein [**' fiddle' **] (http://jsfiddle.net/KyleMit/a4WwQ/) des Codes. Ich sehe wirklich nicht, was das Problem ist. @PeterJack, können Sie dies verwenden/ändern oder einen Screenshot hinzufügen, um das Problem zu demonstrieren. – KyleMit

Sie container Attribut verwenden können, so Tooltip selbst in übergeordneten Container oder ein Ereignis Körperelement platziert wird, und es wird nicht einmal mit Überlauf brechen versteckt, weil es absolut positioniert wird.

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

Quelle

2013-10-28 15:02:11

Einige Benutzer müssen möglicherweise auch den Z-Index von .popover anpassen, insbesondere wenn das Popover innerhalb eines Modales ausgelöst wird. – ptim

Wenn Sie in Ihrem HTML einen Container angeben möchten, verwenden Sie das Attribut "data-container" – sekky

Wie @Morpheus vorgeschlagen - nicht overflow:hidden verwenden. Machst du das als einen Floating-Clearing-Trick? Wenn ja, verwenden Sie den anderen Clearfix-Hack mit Pseudo-Element. (http://www.webtoolkit.info/css-clearfix.html)

Alternativ, wenn Sie overflow:hidden verwenden müssen, und Sie verwenden Tooltip v3 gibt es eine Option namens container die verwendet wird, einen Selektor angeben, an dem der Tooltip Element angehängt wird.

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

Quelle

2013-10-28 13:51:22 Adam

Wie Bootstrap 3 Tooltip Arbeit mit Eltern Div mit Überlauf: versteckt?

Antwort

Verwandte Themen