javascript - 如何将 bootstrap popover 的提示箭头定位在文本字段旁边 - CSS/Jquery

Question

我尝试了堆栈溢出上发布的其他问题的各种答案，但在定位 Bootstrap 弹出窗口的提示箭头方面还没有找到任何运气。 HTML:

<input type = "text" id="account_create"/>

js:

$('.popover').css({
       'top': $('#account_create').offset().top + 'px',
       'left': $('#account_create').offset().left +'px'
  }).fadeIn(300);

上面的代码用于将弹出窗口与文本字段内联。然而这是我得到的:

理想情况下，我希望将弹出窗口和文本字段(第一个)旁边的箭头对齐，但它不断地跳到第二个文本字段旁边。

关于如何实现这一点有什么想法和建议吗？

谢谢~

Answer 1

只需将输入字段和弹出窗口都放在同一个 div 中，并给该 div 位置 relative 和 popover 位置绝对然后左 0

<div class="parent">
    <input>
    <div class="popover"></div>
</div> 

.parent { 
    position: relative:
}
.popover {
    position: absolute;
    left: 0;
}