如何调整 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 较低，而子级 elemtn 的 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

我有同样的问题。 当没有其他脚本解决我的问题时。然后我使用了 parent 类作为 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，但这不是一个好习惯。