Question

我有一个动作来检查字段是否为空，然后触发一个工具提示，如果它是空白的话。除非字段为空，否则不显示工具提示。执行操作时，工具提示正在显示，但它显示在父div的顶部，然后在字段悬停时移动到底部。我希望工具提示在动作和悬停时显示在底部。

HTML

<div class="col-xs-5" >
  <%= label_tag :first_name, "First Name", class: "large-white-font" %>
  <%= ff.text_field :first_name, placeholder: 'First Name', style: "padding-left: 5%", "data-toggle"=>"tooltip", "data-placement"=>"bottom", "title"=>"Oops, please enter"%>
</div>

JS

if ($(element).val() === ""){
    $(element).tooltip("show");
} else{
    $(element).tooltip("destroy");      
};

CSS在行动后错误地位于顶部

element.style {
top: 3px;
left: 0px;
display: block;
}

newmedia="all"
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}

任何眼睛看到我不能做什么？

Answer 1

~~尝试从输入字段中删除数据切换和数据放置，而是添加：~~

~~$(element).tooltip({ placement : 'bottom' });~~

~~到你的javascript。我认为问题在于您使用javascript显示它，但在您将其悬停在其上之前不会考虑"data-placement"=>"bottom"属性。~~

<强>更新
我把它拿回来，还有别的事情要发生。它看起来工作得很好here，我认为你的javascript中除了添加其他css之外还有其他东西。

Answer 2

为了覆盖不需要的样式，我在工具提示 JS

中添加了一个类

$(element).tooltip({
  template: '<div class="tooltip tooltip-adjust-bottom">
  <div class="tooltip-arrow"></div><div class="tooltip-inner">
  </div></div>'
}).tooltip("show");

CSS

.tooltip-adjust-bottom{
  top: auto !important;
  left: 35px !important;
}

Bootstrap工具提示更改类和过度造型

2 个答案: