Question

我正在尝试按类添加引导工具提示到页面上的所有元素，但无法使其工作。

当我的页面显示时，如果有任何验证错误（验证在服务器端完成），错误消息在DIV内，class=error如下所示

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
    <input class="form-control" id="reference" name="reference" placeholder="Reference" required="">
  </div>
  <div id="reference_error" class="error">Field has error</div>
</div>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
    <input class="form-control" id="surname" name="surname" placeholder="Surname" required="">
  </div>
  <div id="surname_error" class="error">Field has error</div>
</div>

DIV隐藏在下面的CSS中，因为想法是在工具提示中显示错误

.error {
    display:none
}

最后，我有以下jQuery函数来遍历所有错误消息并将它们显示为toottips

$(document).ready(function(){  
  $(".error").each(function(index) {
    var $el = $(this);
    $el.parent(".form-group").popover({
       trigger: 'manual',
       placement: 'right',
       content: function () {
           return $el.text();
       }
   }).popover('show');
  });
});

当它运行时，工具提示会出现，但不会附加到我想要的元素上......它们会在页面上浮动。

有谁知道我如何才能使这个工作或者我是以错误的方式解决这个问题？

按类将引导工具提示附加到元素

0 个答案: