Bootstrap Tooltip does not work with Awesome Icon font

Question

I use the bootstrap tooltip, but I can't get it to work with the font, an awesome icon.

I can make this 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 to help me understand why this is not working.

Thank!

Answer 1

You should set the icon to inline-blockin css:

i.fa {
   display: inline-block;
}

You should also set this option for popover:

$(document).ready(function() {
    $("i.fa").popover({'trigger':'hover'});
});

Fiddle: http://jsfiddle.net/ndzqqhhz///

Answer 2

Bootstrap . .

$('[data-toggle="tooltip"]').tooltip();

, HTML- Javascript. . ( ), , .   .

:

<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="Tooltip on left"></i>

Answer 3

Looks like I just needed to remove the tag [a] surrounding the tag [i], for example:

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