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

我试图将引导工具提示按类附加到页面上的所有元素，但无法使其正常工作

当显示“我的页面”时，如果存在任何验证错误（验证在服务器端完成），则错误消息位于DIVs中，带有

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>

最后，我使用以下jQuery函数迭代所有错误消息，并将它们显示为toottip

$(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');
  });
});

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

---

有人知道我该如何让它工作吗？或者我是不是走错了方向了？

似乎是这样的：@Artur我不知道之前发生了什么，但你是对的——它现在似乎正在工作。很抱歉浪费了你的时间。我刚刚成功地重新创建了这个……当我将窗口的大小重新调整为小于全屏的大小时，这种情况就会发生。不过，Artur的JSFIDLE似乎仍然可以使用重新调整大小的窗口。我能看到的唯一区别是JSFIDLE表单控件类有一个宽度，所以我将在后面测试它。至少我知道我现在没有发疯！：）

$(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');
  });
});