I am using bootstrap tooltip but I cannot seem to get it to work with a font awesome icon.
I can get this to work:
<a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title="">Info</a>
But this does not work:
<a data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""><i class="fa fa-info-circle"></i></a>
Here is my javascript:
$(function(){
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
});
Does anyone have any help they can shoot me to help me understand why this doesn't work.
Thanks!
You have to set the icon to an inline-block
in css:
i.fa {
display: inline-block;
}
Also you should set this option to the popover:
$(document).ready(function() {
$("i.fa").popover({'trigger':'hover'});
});
Fiddle: http://jsfiddle.net/ndzqqhfz/2/
According to Bootstrap's documentation . You have to initialize the tooltip & popover functionality.
$('[data-toggle="tooltip"]').tooltip();
By the way, you don't need the HTML elements AND the Javascript. Just one or the other. I think (not sure fully) your icon may not be working because it renders with nothing between your a tags. You could try putting a
in there.
I was able to get this to work:
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="Tooltip on left"></i>
看起来我只需要删除[i]标签周围的[a]标签,如下所示:
<i class="fa fa-info-circle" data-container="body" data-toggle="popover" data-placement="top" title="Other Prep" data-content="Indicates whether or not this product get other prep before shipment" data-original-title=""></i>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.