Conflict between Bootstrap tabbable and popover

问题

I am trying to use Twitter Bootstrap tabbable and Bootstrap popovers in a same page. I am having difficulties resoling the problem of popovers that can't appear beyond tab's limits (problem is when the popover appears next to a border, it's half-hidden).

I am not an expert in JQuery, but as far as I understand, the problem comes from tabs being created in "iframes", and popovers can't be displayed out of its "iframe".

Is there any way I could resolve this problem? (= displaying correctly the popover even when close to tab's border ?)

Thanks a lot!

Below is a sample code showing my problem (ready to copy/paste in a .html http://jsfiddle.net/7PU2D/):

<!DOCTYPE html>
<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
</head>
<body>
<div class="span2">
    Left column
</div>
<div class="span6">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
            <li><a href="#tab2" data-toggle="tab">tab2</a></li>
            <li><a href="#tab3" data-toggle="tab">tab3</a></li>
        </ul>

        <div class="tab-content">
            <div id="tab1" class="tab-pane active">tab1 text
                <div class="well">
                    <a href="#" class="btn btn-danger" rel="popover" style="position: relative;" data-content="And here's some amazing content. It's very engaging. right? " data-original-title="A Title">hover for popover</a>
                </div>
            </div>
            <div id="tab2" class="tab-pane">tab2 text</div>
            <div id="tab3" class="tab-pane">tab3 taxt</div>
        </div>
    </div>
</div>

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script>
$(function(){
  $('a[rel=popover]').popover({
      trigger: 'hover',
      placement: 'in bottom',
      animate: true,
      delay: 500,
});
});  
</script>
</body>

回答1:

The tab content div has the css property overflow set to auto (by Bootstrap). This means that when the size of the content exceeds the size of the div, the browser adds a scrollbar and clips the content. You can overwrite the property to its default (visible) in one of your own css files, or just by using inline styles like this:

<div class="tab-content" style="overflow: visible;">

Example: http://jsfiddle.net/grc4/BXmC3/

回答2:

Use the "container" option. This way you can append the popover/tip to the body element where it will not get chopped off by the tabs pane overflow:hidden...example:

<script>
$(function(){
   $('a[rel=popover]').popover({
   trigger: 'hover',
   placement: 'in bottom',
   animate: true,
   delay: 500,
   container: 'body'
   });
});  
</script>

or:

 <a rel="popover" data-container="body">Pop Me Open</a>

Your tooltip will still be placed correctly next to your link, but since its now attached to the body tag, its not going to be "half-hidden" by the tab pane.

see the docs for tooltip/popover on the bootstrap site...

2.3.2:

http://getbootstrap.com/2.3.2/javascript.html#popovers

or 3.0

http://getbootstrap.com/javascript/#popovers