Menu
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?
579
Enabling sticky tooltip To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
Tooltips, popovers and modal windows are great for clarifying certain words or showing additional information in context without having too much text or taking up too much screen space at once. You can use tooltips, popovers and modal windows in surveys and ReportBuilder elements.
Set the trigger option of the popover to hover instead of click, which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });
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/
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
