bootstrap popover 不顯示在所有元素之上

問題描述

我正在開發一個引導站點，並從 2.0 之後更新到 bootstrap 2.2，除了 popover 之外，所有工作都有效。

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 的行為改變了，或者我如何解決它？謝謝。

最佳解決方案

我能夠透過在 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

次佳解決方案

這是為我工作

$().popover({container: 'body'})

第三種解決方案

我只是有一個這樣的情況，涉及啟用滾動的 DataTables JQuery 庫。

原來與 Z-indices 沒有任何關係，但是其中一個包含 CSS overflow 屬性的 div 設定為隱藏。

我透過向我的元素新增一個事件來觸發 popover 來修復它，這也改變了負責的 div 的 overflow 屬性為 visible 。

第四種方案

最可能的原因是在 popover 上顯示的內容有更高的 z-index 。沒有準確的程式碼/樣式，我可以提供兩個選擇：

您應該嘗試使用 Web 檢查器 (通常在最喜愛的瀏覽器上使用 F12) 精確確定元素，並檢查其實際的 z-index 。

如果找到該值，則可以將其設定為低於預設為 z-index: 1010; 的 popover

或者另一種方法，不是那麼好，將會增加 Popover 的 z-index 。您可以使用 @zindexPopover 在 Less 檔案中或直接透過覆蓋

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

如果找不到解決方案，您應該嘗試在 this jsfiddle 中重現錯誤 – 您可能會在嘗試獲取錯誤時解決問題。

第五種方案

我有一個類似的問題與 2 個固定元素 – 即使 z-index heirachy 是正確的，引導工具提示隱藏在一個元素的下面的 z-index 之後。

新增 data-container="body"解決了這個問題，現在正常工作。

第六種方案

如果 data-container = “body” 不能嘗試其他兩個屬性：

data-container="body" style="z-index:1000; position:relative"

z-index 應該是最大限度。

參考文獻

bootstrap popover not showing on top of all elements

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

bootstrap popover 不顯示在所有元素之上