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

根据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 2

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

i.fa {
   display: inline-block;
}

您还应该将此选项设置为弹出窗口：

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

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