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

我試圖使用Bootstrap和驗證庫（一個jQuery插件）稱爲Validetta（http://lab.hasanaydogdu.com/validetta/）添加字段驗證到「聯繫我們」窗體。如何調整Bootstrap表單域的工具提示的z-index？

雖然實現了表單和驗證，但我注意到工具提示的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>

任何幫助，將不勝感激！

來源

2017-06-16 Luke Chavers

請參閱本答案[Tooltip]（https://stackoverflow.com/questions/14386759/z-index-of-hover-tooltip-with-css） –

-1

我會添加一個像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但這不是一個好習慣。

來源

2017-06-16 05:05:29 Baruch

我已經嘗試過這些方面的事情;我在'validetta-bubble'類中添加了一個'z-index：10000'，並在Chrome檢查器中驗證'z-index'沒有被覆蓋。我也嘗試過'！important'，看看它是否有效果。但事實並非如此。根據我讀過的其他內容，我認爲我需要在字段，工具提示，表單，div或其他東西上應用'position'屬性，但還沒有設法找到合適的組合。儘管如此，儘管Validetta不允許我輕鬆添加額外的課程，但我會強迫你進入SPAN並嘗試你所建議的內容。 –

好的，我證實這是行不通的:( - 我用'$（「SPAN.validetta-bubble」）.addClass（「crazy-zindex」）;'將'crazy-zindex'類添加到在我的CSS中添加了上面提到的確切的CSS代碼片段，然後我使用Chrome檢查器來驗證它是否被添加，並且'z-index'被正確覆蓋爲'10000'。已經改變了，工具提示仍然出現在它下面的表單字段「下面」。 –

您可以檢查「validetta-bubble」的父元素的上的z-index屬性; 因爲z-index從父母到孩子判斷，如果父母的z-索引較低，而子女elemtn的這個元素的z-索引較高，則最終根據母親的工作，您可以嘗試設置表單組的z-索引

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

，並提出了更高的目標一樣的答案1

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

來源

2017-06-16 06:02:03 zuzu

最終，我找到了這個問題的答案在這裏：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>

因此，要解決這個問題，我包形式的元件的每一行中，在style屬性指定的z-index一個div。當我走下行，我的z-index值下降，就像這樣：

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

這確保了每一行跌「的背後」上面的一個，允許工具提示出現在字段（和標籤）的頂部，而不是它們之下。

來源

2017-06-16 10:00:59

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

回答

相關問題