javascript - Bootstrap Tooltip shows up under the element - Stack Overflow

admin管理员组

文章数量:1287829

The tooltip is showing under the element when I hover over it. The z-index of the element is 2, while the tooltip has 1030. I'm not sure what's going on. It's only for some elements too, even though they have the same markup.

Here's the page that it's happening on

It's the shapes on a page at the bottom (red, blue, yellow, etc) #rune_page_view

Any help would be appreciated.

The tooltip is showing under the element when I hover over it. The z-index of the element is 2, while the tooltip has 1030. I'm not sure what's going on. It's only for some elements too, even though they have the same markup.

Here's the page that it's happening on http://darebounty./streams/11

It's the shapes on a page at the bottom (red, blue, yellow, etc) #rune_page_view

Any help would be appreciated.

• javascript
• html
• twitter-bootstrap
• tooltip
• z-index

Share Improve this question Follow edited Apr 3, 2013 at 21:16 Anujan asked Apr 3, 2013 at 20:35 AnujanAnujan 93811 gold badge99 silver badges2020 bronze badges 4

• 1 It would help to mention which elements this is happening with – Ian Commented Apr 3, 2013 at 20:47
• look at the answer here – anpsmn Commented Apr 3, 2013 at 21:02
• A higher z-index on an element does not necessarily guarantee it will be displayed above other elements with a lower z-index. See this explanation of the stacking context. – excentris Commented Apr 3, 2013 at 21:02
• I've added which elements it's doing it to in the OP, sorry. – Anujan Commented Apr 3, 2013 at 21:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I had this issue and was messing around with z-indexing in order to solve it, but it ended up being futile. I then checked out this link.

I found the "data-container='body'" attribute very useful. It was able to make my tooltips show up over everything (so that the user could actually read them), which is what I imagine most people would want.

Hope that helps anyone ing upon this in the future. :)

I had exactly the same issue.

In my case the reason was that the enclosing DIV element had overflow: hidden set.

I changed it to overflow: visible and it worked.

Maybe this will help :).

本文标签： javascriptBootstrap Tooltip shows up under the elementStack Overflow