Bootstrap工具提示无法与字体真棒图标一起使用 [英] Bootstrap Tooltip Not Working with Font Awesome Icon

问题描述

我正在使用引导工具提示，但似乎无法将其与字体真棒图标一起使用.

I am using bootstrap tooltip but I cannot seem to get it to work with a font awesome icon.

我可以使它工作:

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

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 me to help me understand why this doesn't work.

谢谢！

推荐答案

根据Bootstrap的文档.您必须初始化工具提示&弹出功能.

According to Bootstrap's documentation. You have to initialize the tooltip & popover functionality.

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

顺便说一句，您不需要HTML元素和Javascript.只是一个或另一个.我认为(不确定完全)您的图标可能无法正常工作，因为它在标记之间没有任何显示.您可以尝试在其中放置 .

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 class="fa fa-info-circle" data-toggle="tooltip" data-placement="left" title="Tooltip on left"></i>

这篇关于Bootstrap工具提示无法与字体真棒图标一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！