javascript - Bootstrap 工具提示不适用于 Font Awesome 图标

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 的 documentation .您必须初始化工具提示和弹出窗口功能。

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

顺便说一下，您不需要 HTML 元素和 Javascript。只是一个或另一个。我认为(不确定)您的图标可能无法正常工作，因为它在您的 a 标签之间没有任何内容。你可以试着放一个  在那里。

我能够让它工作:

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