CODEWITHSUNDEEP
javascripttwitter-bootstrap
minda
minda

Reputation: 83

How to get a tooltip to appear in 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?

Upvotes: 6

Views: 4924

Answers (1)

Phil
Phil

Reputation: 164752

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/

Upvotes: 6

Related Questions