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?

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?

• javascript
• twitter-bootstrap

• 1 Don't set data-original-title manually. The JS does this for you – Phil Commented Oct 18, 2013 at 0:10

1 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/jAtqW/