javascript - 如何调整Bootstrap表单字段的工具提示的Z索引？

我正在尝试使用Bootstrap和名为Validetta（http://lab.hasanaydogdu.com/validetta/）的验证库（jQuery插件）将字段验证添加到“联系我们”表单中。
不过，在实现表单和验证之后，我注意到工具提示的z索引有问题，导致它显示在下一个表单字段下面。
如果我处理的是普通的HTML和CSS，我想答案对我来说会更清楚一点，但是使用Bootstrap，我不知道什么样的神秘主义正在进行中，并且在如何以最佳实践的方式解决这个问题上很难找到答案。

我知道Validetta正在表单字段后面添加一个<SPAN>，并正在对其应用一个自定义CSS类，我可以轻松地修改、重写或追加该类。我还读到，在其他上下文中，这个问题可以通过工具提示z-index上的position和SPAN以及它的一个或多个父元素的组合来解决。。。但我所有的快速测试和试验都没有达到预期的效果。
下面是上面显示的表单字段的呈现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>

任何帮助都将不胜感激！

最佳答案

您可以检查“validetta bubble”的父元素的z-index属性；
因为z-index是从父到子判断的，如果父元素的z-index较低，而子元素的z-index较高，则该元素的z-index最终基于parenet的
您可以尝试设置窗体组的z索引

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

设定一个更高的目标，比如答案1

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