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:

Answer 1

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>

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

Answer 3

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/