Geek Answers Handbook

How to make a tooltip appear in a popover?

On my machine, this code creates a tooltip when you hover over the 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 add up the tooltip inside the popover, the code used to create the tooltip no longer triggers the 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>

This is how I run popover and tooltip in 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 make a tooltip appear in an element inside a popover?

+4
source share
1 answer

The problem is that the class .ttthat is displayed in your popover is not the one that was used to bind .tooltip()to.

selector,

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

- http://jsfiddle.net/jAtqW/

+4

More articles:


All Articles