Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Popovers hidden by parent overflow setting. #5889

yabdab opened this Issue Nov 12, 2012 · 15 comments


None yet
6 participants

yabdab commented Nov 12, 2012

The recent 2.2 updates have made popovers not a flexible as before.

The popover is now cropped by any parent overflow CSS setting of hidden. This was not the case prior to 2.2

Is there a work around for this?


Yohn commented Nov 12, 2012

heres my pull request #5768 I'd replace the tooltip.js with my tooltip.js file, and then to get it to work with the overflowed element, you can either add data-container="body" or use javascript $().tooltip({container: 'body'}) the container option can be any element, and if you have it within a modal, use .modal-body, or within a popover use .popover

yabdab commented Nov 12, 2012

Excellent! Works great. Will this be rolled into next update?


Yohn commented Nov 12, 2012

I'm hoping so, or at least something like it because I was having the same type of problem


mdo commented Nov 12, 2012


@mdo mdo closed this Nov 12, 2012

I'm having a serious problem with popovers in 2.2.1 and I think it's related to this issue. I've yet to figure out what is causing it.
Here's my working site with Bootstrap 2.x (I think it's 2.0.1 but not 100% sure):

Paste any Chinese text into the box and click Go. Here's an example:


Now hover over the generated annotations.. you should see the Bootstrap popovers working very nicely.

Well, 2.2.1 has screwed that up for me big time. Basically on my dev machine I see 2 issues:

1.I still have .popover-inner set to 450px but 2.2.1 doesn't seem to care about that.
2. I have to click some text link before it shows the popup.. it no longer pops up automatically. What gives?

I'm not a CSS/JS wiz, so any help you guys can give me in resolving this to make it work with 2.2.1 would be much appreciated. Thanks in advance!

OK, I did finally fix one problem: for the width issue, I now adjust it via .popover and not .popover-inner, but that still leaves the one big problem where the popups don't actually popup any more... I have to click the links to make the popups appear and then they don't go away after that. Any ideas?

By the way, I did try adding this:

container: '.popover'

at the end of this block:


That didn't work.


mdo commented Nov 22, 2012

Popovers are triggered on click.

"Popovers are triggered on click."

  • Sorry, not sure I follow... in my live site, they trigger on hover.. has 2.2.1 made it trigger on click? How do I change it to work on hover again?

Nevermind; I got it:

trigger: 'hover'


pstch commented Jan 10, 2013

Maybe this should be the documented (the data-container="body" workaround) ?


Yohn commented Jan 10, 2013

@pstch the container option was added to the 2.3.0-wip branch, and it will be noted in the docs when its released.

pstch commented Jan 14, 2013

@Yohn okay, many thanks :)

@mchandleraz mchandleraz referenced this issue in aristath/bootstrap-admin May 14, 2013


Submenu Popovers showing behind elements #10

$().tooltip({container: 'body'})

worked great for me! thanks


ghost commented Nov 10, 2014

$().popover({container: 'body'})

Works for me, thanks!

@hnrch02 hnrch02 locked and limited conversation to collaborators Nov 10, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.