引导工具提示不能使用字体真棒图标

我正在使用引导工具提示，但我似乎无法让它与字体真棒图标一起工作。引导工具提示不能使用字体真棒图标

我能得到这个工作：

<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'); 
     } 
    }); 
});

没有人有他们可以帮忙开枪帮我理解为什么这不起作用。

谢谢！

来源

2014-08-27 LargeTuna

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

i.fa { 
    display: inline-block; 
}

你也应该设置这个选项为酥料饼：

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

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

来源

2014-08-27 15:57:10 GlabbichRulz

该示例使用很老版本的引导UND字体真棒的。 – Pascal 2014-10-04 14:09:34

貌似我只需要移除围绕[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>

来源

2014-08-27 16:30:22 LargeTuna

根据Bootstrap的documentation。您必须初始化工具提示弹出式功能。

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

顺便说一句，你不需要HTML元素和Javascript。只是一个或另一个。我认为（不太清楚）你的图标可能无法正常工作，因为它在你的一个标签之间没有任何东西。你可以尝试在里面放一个 。

我能得到这个工作：

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

来源

2015-06-03 01:03:40

引导工具提示不能使用字体真棒图标

回答

相关问题