如何調整 Bootstrap 表單字段的工具提示的 z-index？

Question

我正在嘗試使用 Bootstrap 和名為 Validetta ( http://lab.hasanaydogdu.com/validetta/ ) 的驗證庫（jQuery 插件）向“聯系我們”表單添加字段驗證。

但是，在實現表單和驗證之后，我注意到工具提示的 z-index 存在問題，導致它顯示在下一個表單字段下方。

如果我處理的是普通的 HTML 和 CSS，我認為答案對我來說會更清楚一些，但是對於 Bootstrap，我不知道正在發生什么樣的神秘主義，並且很難找到如何解決這個問題的答案最佳實踐方式。

我知道 Validetta 在表單字段之后添加了一個<SPAN>並且正在對其應用自定義 CSS 類，我可以輕松地修改、覆蓋或附加它。 我還讀到，在其他情況下，可以使用工具提示SPAN上的z-index和position及其一個或多個父元素的組合來解決此問題……但我所有的快速測試和試驗都沒有達到了預期的效果。

這是上面顯示的表單字段的渲染 HTML：

 <div class="form-group has-feedback has-error"> <label class="control-label" for="inputFromName">Your Name</label> <input type="text" class="form-control" id="inputFromName" name="fromName" placeholder="Your Name Here" data-validetta="required" data-vd-message-required="This field is required!"> <span class="validetta-bubble validetta-bubble--bottom">This field is required!<br></span> </div>

任何幫助將不勝感激！

Answer 1

您可以檢查 "validetta-bubble" 的父元素的 z-index 屬性； 因為 z-index 從父到子判斷，如果父元素的 z-index 較低，而子元素的 z-index 較高，則此元素的 z-index 最終會基於 parenet 工作，您可以嘗試設置 form-group 的 z-index

.form-group {
  z-index: 10000;
  position: relative;
}

並設置更高的目標，如答案 1

.crazy-zindex {
  z-index: 10001;
}

Answer 2

最終，我在這里找到了這個問題的答案： z-index of hover tooltip with CSS

來自Панайот Толев的回答提供了這個例子：

 <div class="level1"> <span class="level2"> 1 </span> <span class="level2"> 2 </span> <span class="level2"> 3 </span> </div>

所以，為了解決這個問題，我將每一行表單元素包裹在一個 div 中，該 div 在style屬性中指定了一個z-index 。 當我沿着行向下時，我減少了z-index值，如下所示：

 <div style="z-index: 23;"> .. </div> <div style="z-index: 22;"> .. </div> <div style="z-index: 21;"> .. </div>

這確保每一行都落在上面一行的“后面”，這使得工具提示出現在字段（和標簽）的頂部，而不是它們的下方。

Answer 3

我有同樣的問題。 當沒有其他腳本解決我的問題時。 然后我使用父類作為data-container 。 對於經驗。

<ul id="responsivator">
    <li data-placement="bottom" data-toggle="tooltip" data-container="#responsivator" title="iPhone landscape Preview" >
</ul>

Answer 4

我會添加一個像crazy-zindex這樣的自定義類（我相信你可以想出一個更好的名字）和 css 中的規則。

HTML

<span class="validetta-bubble validetta-bubble--bottom crazy-zindex">This field is required!<br></span>
                                                       ^^^^^^^^^^^^

CSS

.crazy-zindex {
  z-index: 10000;
}

重要的是要記住 CSS 是級聯的，所以最后一條規則將覆蓋它上面的任何內容，也就是說，任何你想要做的覆蓋引導，你都必須在引導后link該樣式表。 或者您可以使用!important但這不是一個好習慣。