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的documentation。你必须初始化工具提示＆amp;弹出功能。

$('[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>

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

3 个答案: