Bootstrap Tooltip Not Working with Font Awesome Ic

问题:

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!

回答1:

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>

回答2:

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/

回答3:

Looks like I just needed to remove the [a] tag surrounding the [i] tag like so:

 <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>