Bootstrap工具提示不使用字体真棒图标

Question

我正在使用bootstrap工具提示，但我似乎无法使用字体真棒图标。

我可以让这个工作：

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

但这不起作用：

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

这是我的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');
        }
    });
});

有没有人有任何帮助，他们可以拍我，以帮助我理解为什么这不起作用。

谢谢！

Answer 1

您必须将图标设置为css中的inline-block ：

i.fa {
   display: inline-block;
}

您还应该将此选项设置为popover：

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

小提琴： http ： //jsfiddle.net/ndzqqhfz/2/

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

看起来我只需要删除[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>