引導工具提示不能使用字體真棒圖標

我正在使用引導工具提示，但我似乎無法讓它與字體真棒圖標一起工作。引導工具提示不能使用字體真棒圖標

我能得到這個工作：

<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

引導工具提示不能使用字體真棒圖標

回答

相關問題