Popover position not updated after scrolling (tested 2.1.0)

[sompylasar]

The popover remains at the same position relative to the page and does not respect the position of the element it was initialized on. Below are two screenshots of the issue reproduced at http://twitter.github.com/bootstrap/javascript.html#modals (message me please if the links become broken).

[sompylasar]

No fiddle is required, the bug reproduces on the main bootstrap page! Have a look.

[fat]

this is a tricky one, because modal is fixed positioning and tooltip is absolute. We could provide an option for fixed position i suppose tho - @mdo, what do you think?

[andrewdeandrade]

Hey @sompylasar,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[mdo]

Hey @malandrew, please leave the triaging of issues to @fat and I for now :). Appreciate the help, but it makes you look like someone who maintains the project and that isn't the case, thus signing you up for extra work. Thanks!

As far as positioning of these, @fat, I think it'd be awesome if we could maintain their positions relative to the elements that triggered them.

[andrewdeandrade]

@markdotto Yeah, I made a big mistake and it wasn't intentional. I was playing around with the makefile and didn't realize that running make haunt was going to have consequences beyond the project locally on my machine. I did an npm install haunt then make haunt to investigate what it does instead of just going to the docs for haunt on github. I explained what happened in #3550 and I filed an issue in fat/haunt fat/haunt#11

Somehow I totally missed the HAUNT GITHUB ISSUES 4 FAT & MDO ONLY (O_O ) comment. My bad.

[demike]

@fat and @markdotto: as of 2.1.2-wip where the tooltips and popovers are insterted after the target element this is an easy one. Just make the modal-body position:relative !

[demike]

Sorry, that triggers a new Problem: the popovers get cut off :(

[Tibo-R]

Is there any update on this issue ? It would be very cool to have the popover following the element that triggered it.

[demike]

There is a solution. Just tried it. But you need an extra div with position:relative that wraps all your modal body content

<div class="modal-body">
<div style="position:relative"> The content including your popover </div>
</div>

[demike]

sorry, the same cut off again when the modal width is too small :(

[Tibo-R]

Thanks for the help @demike but if the popover gets cut off it's not a solution I can use...

[Yohn]

@Tibo-R heres my pull request #5768 basically, you'll want to swap out your tooltip.js with my bootstrap-tooltip.js and then to get it working how you want it, you can use the container option, to tell the popover where to get appended at..
so if its within a modal, you could do data-container=".modal-body" or with javascript

#().popover({
  container: '.modal-body'
})

.modal-body can be any element as long as its on the page

[Tibo-R]

Thanks I will try this out !

[demike]

That does not solve the problem: the problem is that the combination of y overflow -> scroll and x overflow visible is
not possible (at least tested in chrome)

.modal-body {
overflow-x: visible;
 overflow-y:scroll;
position:relative;

for the modal-body

The scrollbar is the problem

[mdo]

This has been resolved in 2.2.2-wip.

[adibreaban]

How can I make the Popover to build next to the selector element and not before closing the BODY ?! I tried selector, placement inside and all options with no luck. Any help?