19

これが私のコードです：

HTML :

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

Jクエリ：

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

CSS :

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

カート アイコンにカーソルを合わせると、ツールチップが表示されますが、カート ボックスの上部には表示されません。

どうすればこれを修正できますか?

4

3 に答える 3

44

属性を使用containerすると、ツールチップ自体が親コンテナーまたはイベント本体要素に配置され、絶対に配置されるため、オーバーフローが非表示になっても壊れません。

$('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom',
   container: 'body'
});
于 2013-10-28T15:02:11.203 に答える
0

@Morpheus が示唆したように、使用しないでくださいoverflow:hidden。フロートクリアのトリックとしてこれを行っていますか？その場合は、疑似要素を使用した他の clearfix ハックを使用してください。( http://www.webtoolkit.info/css-clearfix.html )

または、使用する必要があり、Tooltip v3 を使用している場合は、ツールチップ要素が追加されるセレクターを指定するために使用されるoverflow:hiddenオプションが呼び出されます。container

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

于 2013-10-28T13:51:22.157 に答える