Home/ Questions/Q 8174913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T22:35:06+00:00

I am trying to use Twitter Bootstrap tabbable and Bootstrap popovers in a same

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0