javascript - 在所有元素之上,javascript Bootstrap popover沒有顯示

  显示原文与译文双语对照的内容
107 4

我正在處理一個 Bootstrap 站點,在更新到 Bootstrap 2.2之後,除了以外,所有工作都是正常工作的。

popovers仍然顯示良好,但它們並沒有顯示在所有其他元素之上。


<div>//this sits on top of the popover. this did not happen before cleaning up scripts.


 <div>//popover shows on top of this


 <div>//popover shows on top of this


//link here with popover in it.


 </div>


 </div>


</div>



任何人都知道為什麼popover的行為更改了,或者如何修復它? 謝謝。

时间: 原作者:

71 0

我可以通過在html元素上設置 data-container="body" 來解決這個問題

HTML 示例:


<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">


 hover over me


</a>



JavaScript 示例:


$('your element').tooltip({ container: 'body' }) 



從此鏈接中發現:https://github.com/twitter/bootstrap/issues/5889

原作者:
52 0

我只是有一個類似於這個情況的情況,包含了已經啟用的數據表JQuery庫。

結果與z 索引無關,但與包含 CSS overflow 屬性設置為隱藏的它的中一個包含的div無關。

我通過向元素添加一個事件來觸發 popover,這也改變了負責的div的overflow 屬性。

86 2

最可能的原因是popover上顯示的內容具有更高的z-index 。 如果沒有精確的代碼/樣式,我可以提供兩個選項:

你應該試著用網路檢查器( 通常在你最喜愛的瀏覽器上使用 F12 ) 精確的找出元素,並檢查它們的實際 z-index

如果找到這個值,可以將它設置為低於 popover,默認情況下為 z-index: 1010;

或者另一種方法,不那麼好,就是增加popover的z-index 。 你可以在較少文件中使用 @zindexPopover,也可以直接重寫


.popover {


 z-index: 1010;/* A value higher than 1010 that solves the problem */


}



在你找不到解決方案的情況下,你應該嘗試在像這樣的東西中複製 Bug - 你可能會在嘗試獲得該解決方案時解決這個問題。

原作者:
134 0

我有 2個固定元素的問題- 即使 z-index heirachy正確,Bootstrap 工具提示被隱藏 behind的一個元素。

添加 data-container="body" 解決了問題,現在按預期工作。

...