bootstrap popover not showing on top of all elements

javascript html twitter-bootstrap popover
Kyle picture Kyle · Dec 24, 2012 · Viewed 123.7k times · Source

I'm working on a bootstrap site and after updating to bootstrap 2.2 from 2.0 everything worked except the popover.

The popovers still show up fine, but they don't show up on top of all other elements. 

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

Anyone have any idea on why the behavior of the popover changed, or how I can fix it? Thanks.

Answer

Kyle picture Kyle · Apr 13, 2013

I was able to solve the problem by setting data-container="body" on the html element

HTML example: 

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript example:

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

Discovered from this link: https://github.com/twitter/bootstrap/issues/5889

Related questions

Html file as content in Bootstrap popover in AngularJS directive

I have an Angular directive to handle Bootstrap popovers as shown in the code below. In my directive I'm setting the popover content to a HTML string, which I think is ugly. What I wanna do is to use an "…

Read More
How do I make Bootstrap popover work with HTML content in a seperate element

I am in the process of combining Bootstrap panels with Bootstrap popover functionality. The goal is to show a popover when the user hovers the panel's header. I've already got this to work, except that the data-content="" part becomes quite …

Read More
How can I use "div" in Twitter's Popover with multiple buttons?

This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover But in my page I have a bunch of popovers (say 50-100). So I need to modify this solution. This …

Read More