Bootstrap's Tabs do not seem to be working for me when used within Bootstrap's Popover.

What happens is following:

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

Tabs are created correctly and if you try them outside of popover they work fine.

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>

$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

What seems to happen with bootstrap in this case is that it duplicates the elements. I planned using further javascript libs and plugins on elements within content tabs, and this makes it pretty much impossible, unless somebody provides a solid workaround. I honestly think this is a valid Bootstrap's bug.

jsfiddle demo: /

Bootstrap's Tabs do not seem to be working for me when used within Bootstrap's Popover.

What happens is following:

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

Tabs are created correctly and if you try them outside of popover they work fine.

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>

$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

What seems to happen with bootstrap in this case is that it duplicates the elements. I planned using further javascript libs and plugins on elements within content tabs, and this makes it pretty much impossible, unless somebody provides a solid workaround. I honestly think this is a valid Bootstrap's bug.

jsfiddle demo: http://jsfiddle/iboros/nCfBf/

• javascript
• jquery
• twitter-bootstrap
• tabs
• popover

• 2 It's not Bootstrap that's duplicating the elements. It documents the content option as being markup (or markup resulting from a function). It doesn't directly support using elements already in the page. Your code duplicates the elements, by using existing DOM elements, taking their html, and providing it to Bootstrap to use for the content. The solution is quite simple: Just remove the elements you're duplicating (as @PSL shows). – T.J. Crowder Commented Jun 1, 2013 at 6:04

1 Answer 1

Option 1:

Remove the existing tab and get its HTML content.

$("#btnPopover").popover({
    html: true,
    trigger: 'click',
    title: "Title",
    placement: "bottom",
    content: $('#popoverContent').remove().html()
});

Demo

Option 2:

Use class selector for tabs instead of id selector

i.e

<a href=".tab2" data-toggle="tab">Tab 2</a>

instead of

<a href="#tab2" data-toggle="tab">Tab 2</a>

Html

<div class="tabbable hide" id="popoverContent">
     <ul class="nav nav-tabs">
        <li class="active"><a href=".tab1" data-toggle="tab">Tab 1</a></li>
        <li class="tab"><a href=".tab2" data-toggle="tab">Tab 2</a></li>
        <li class="tab"><a href=".tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="padding-top: 15px">
        <div class="tab-pane active tab1" >Tab Content 1</div>
        <div class="tab-pane tab2">Tab Content 2</div>
        <div class="tab-pane tab3" >Tab Content 3</div>
    </div>
</div>
<a class="btn" id="btnPopover" href="#">Launch Popover</a>

Demo