How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

Question

I tried the various answers from the other questions posted on stack overflow, but haven't found any luck yet in positioning the tip arrow of the bootstrap popover. html:

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

js:

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

The above code for inlining the popover with the text field. however this is what im getting:

Ideally i would want to align the popover and the arrow next to the text field ( the first one), but it constantly keeps jumping next to the second text field.

Any ideas, suggestions on how this can be achieved??

Thanks~

Answer 1

Simply place both the input field and popover in the same div and give that div position relative and the popover position absolute then left 0

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

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