如何调整Bootstrap表单字段的工具提示的Z索引? [英] How can I adjust the z-index of a tooltip for a Bootstrap form field?

问题描述

我正在尝试使用Bootstrap和名为Validetta(

我知道Validetta会在form字段后添加< SPAN> ，并对其应用自定义CSS类，我可以轻松地对其进行修改，覆盖或追加.我还阅读了在其他情况下，可以结合使用 SPAN 上的 z-index 和 position 来解决此问题以及它的一个或多个父元素...但是我所有的快速测试和试验都没有达到预期的效果.

这是上面显示的表单字段的呈现的HTML:

 < div class ="form-group has-feedback has-error">< label class ="control-label" for ="inputFromName">您的姓名</label>< input type ="text" class ="form-control" id ="inputFromName" name ="fromName"占位符=您的名字在这里" data-validetta =必需" data-vd-message-required =此字段是必需的！>< span class ="validetta-bubblevalidetta-bubble--bottom">此字段为必填项！</div>  

任何帮助将不胜感激！

解决方案

我遇到了同样的问题.当没有其他脚本解决我的问题时.然后，我将父级类用作数据容器.为了实验

 < ul id ="responsivator">< li data-placement ="bottom"/底部data-toggle =工具提示"data-container =#responsivator"title ="iPhone横向预览"></ul> 

I'm trying to add field validation to a "Contact Us" form using Bootstrap and a validation library (a jQuery Plugin) called Validetta (http://lab.hasanaydogdu.com/validetta/).

After implementing the form and the validation, though, I am noticing a problem with the z-index of the tooltip that causes it to show up beneath the next form field.

If I were dealing with normal HTML and CSS, I think the answer would be a little more clear to me, but with Bootstrap, I do not know what sort of mysticism is afoot and am having trouble finding answers on how to solve this problem in the best-practices way.

I know that Validetta is adding a <SPAN> after the form field and is applying a custom CSS class to it, which I can easily modify, override, or append. I've also read, in other contexts, that this problem can be solved using a combination of z-index and position on the tooltip SPAN and one or more of its parent elements... but all of my quick tests and trials have not had the desired affect.

Here's the rendered HTML for the form field shown above:

<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>

Any help would be much appreciated!

解决方案

I had same issue. When no other script solved my problem. Then I had used parent class as data-container. For exp.

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

这篇关于如何调整Bootstrap表单字段的工具提示的Z索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！