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 find the place where font-size for input is set?

    How to add css to dynamically created tables

    How do I target a div without a class or id but with all these specific style-attributes

    How to apply CSS style when ID is taken?

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    JavaScript / Jquery : How to find line-through words

    How to control the css for two instance of Google Maps autocomplete on the same page?

    How to fix an image to the bottom right with resizing window?

    How to keep css animation effect?

    How not to mess up styling when using css frameworks

    How to activate a CSS3 (webkit) animation using javascript?

    CSS - How to hide div by hovering another div [duplicate]

    How to use JavaScript OnResize with delay or less processing intensive

    How does jQuery .fadeTo() work?

    How can I place two headings next to each other using CSS?

    How to remove css files?

    Hide/Show Load function now working

    How to give different views for same url for different devices with same resolution?

    How to get my navigation bar to be vertically centered

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    Css accordion menu, how to set height to automatic?

    How to highlight selected tab in Web Forms including Master Page

    How to make Bootstrap sticky footer content go full page height?

    How to make the html table on same line? Wordpress, woocommerce

    How to make hovering over a class to trigger changes in other classes?

    How to put a background image on a site

    How to align multiple columns in bootstrap 3 carousel?

    How to make this loading overlay effect responsive?

    How dynamically aligning text on website

    How to give viewers custom CSS option