How to show a specific element on Bootstrap Popover

Question

I would like to show the bootstrap tab inside the Popover. I referred to the Bootstrap documentation and am not able to acheive this correctly. Following is the code that I have tried

http://jsfiddle.net/p57pD/1/

var tab = $('#mytab');
$('#mypop').popover({
    selector: tab
});

Am not sure what is the mistake that I am doing to get this working. Appreciate if someone could help me understand the mistake.

Answer 1

I don't think you need the selector; you can use this:

$('#mypop').popover({
    html: true,
    content: function() {
      return $('#mytab').html();
    }
})

Note that the div should have id="mytab" and not class="mytab" as in your fiddle.

A working sample (forked from your fiddle) is here.

Takeaways:

1. set html = true to allow html inside the popover.
2. use the content function to return the the html - which in your case comes from a hidden div
3. don't use the selector option for this; it's a bit confusing (to me at least), but it is not intended to use with elements that are already in the dom as in your example ref 1 ref2