How to get a tooltip to appear in a popover?

Question

On my machine, this code produces a tooltip on hover over a bootstrap glyphicon:

<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span> 

However when I stack the tooltip inside a popover, the code used to generate a tooltip on its own no longer produces a tooltip:

<a href="#" class="example" data-toggle="popover" >Experiment</a>
<div id="popover_content_wrapper" style="display: none">
  <a href=""> 
    <span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
  </a>
</div>

Here's how I'm triggering the popover and tooltip in the javascript (below these html elements)

<script>
    $('.tt').tooltip();
    $('.example').popover({
        trigger: 'hover click', 
        html: true,
        content: function() {
            return $('#popover_content_wrapper').html();
        }, 
        placement: 'top', 
        delay: { show: 500, hide: 1000 }
    });

</script>

Any ideas on how to get a tooltip to appear on an element inside a popover?

Answer 1

The problem is that the .tt classed element that appears in your popover is not the same one used to bind .tooltip() to.

You need to use the delegation model via the selector option, eg

$(document).tooltip({
    selector: '.tt'
});

Demo here - http://jsfiddle.net/jAtqW/