Bootstrap Tooltip Not Working with Font Awesome Icon

Question

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!

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

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