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


Tags: javascript,jquery,css,twitter-bootstrap

Problem :

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:

enter image description here

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~



Solution :

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;
}

    CSS Howto..

    How to maneuver between two divs using CSS?

    How do I set multiple elements' css in one page without the :not attribute?

    How to keep a navbar toggle open until selection is made

    How do I make the link in the back div clickable

    CSS Web fonts how to use it with use of @font-face its not working

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to Make a Picture rotate Continuously? [closed]

    CSS - How to remove whitespace between anchored images

    How to customize responsive columns and inputs fields in twitter bootstrap?

    CSS animations - How to toggle direction with one keyframes declaration

    How to show “…” when there's not enough space to view all the text

    How can I change this HAML format to normal CSS style?

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    How to give border to any element using css without adding border-width to the whole width of element?

    How to change the size of item-avatar in ionic?

    How to style CSS for input box's width as a percentage when it has border and padding?

    How to alternate rowcolor in a GridView using pure CSS?

    How to reset Chrome dev tools CSS styles filter?

    How to write a responsive semantic HTML5 page ? (With a framework ?)

    css/html how to make logo appear after heading

    How to change the color of item selection radcombobox with a css style?

    How to draw a line on the baseline of the text in HTML/SVG/CSS

    How to disable Cufon on certain elements?

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How can i find and change css style in ruby?

    How to select multiple objects of a class for css manipulation

    How do I keep my footer at the bottom of the page without it coming up automatically to fill space if there is little content?

    How do I add extra slides to this pure CSS text rotator?

    How to enforce input text to take 100% width of its parent

    how to make div with one line of text and div with two the same height?