我將從twitter引導添加右圖工具提示到圖標元素。如何將twitter引導工具提示添加到圖標

的代碼是這樣的：

<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>

我想，當光標移到圖標上，顯示有一些信息，右側提示...

我該怎麼辦？包含tooltip.js librery並在圖標代碼中添加一個元素是不夠的？我很困惑。

謝謝。

來源

2013-03-19 sharkbait

的JavaScript

$(function() { $(".has-tooltip-right").tooltip({ placement: 'right'}); $(".has-tooltip-left").tooltip({ placement: 'left'}); $(".has-tooltip-bottom").tooltip({ placement: 'bottom'}); $(".has-tooltip").tooltip(); });

你嘗試過什麼？ http://twitter.github.com/bootstrap/javascript。html＃工具提示 – isherwood 2013-03-19 15:40:18

118

我最近使用它像這樣：

<i class="icon-ok-sign" rel="tooltip" title="Key active" id="blah"></i>

主要生產：

enter image description here

您使用它聲明設置工具提示和其他功能（延遲等）的定位js：

$(document).ready(function(){ 
    $("[rel=tooltip]").tooltip({ placement: 'right'}); 
});

正如在評論中提到的，你可以f ind其他屬性/選項here。

來源

2013-03-19 15:45:16 nickhar

+1是的，它是這樣簡單。 – Marijn 2013-03-19 15:51:55

您可能忘記使用.tooltip()來初始化您的工具提示。

.tooltip()函數必須在您想要提供工具提示偵聽器的每個元素上調用。這是出於性能目的。您可以通過調用父功能一次初始化了一堆，像這樣：$('.tooltip-group').tooltip()

View the initialize function on one element on JSFiddle.

的Javascript

$(document).ready(function() { 
    $('#example').tooltip(); 
});

標記

<h3> 
    Sensors Permissions 
    <i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i> 
</h3>

來源

2013-03-19 15:50:03 jmeas

@ nickhar的答案，使用data-toggle="tooltip"使用Bootstrap 2.3.2和3.0進行測試：

<i class="icon-ok-sign" data-toggle="tooltip" title="Key active" id="blah"></i>

主要生產：

enter image description here

通過使用JS宣佈其設置的提示和其他功能（延遲等）的定位：

$(document).ready(function(){ 
    $("[data-toggle=tooltip]").tooltip({ placement: 'right'}); 
});

正如評論所說，你可以找到其他屬性/選項here。

來源

2013-08-26 10:12:08

在HTML

<a href="#" class="has-tooltip-bottom" title="" data-original-title="Tooltip">This link</a> 
and <a href="#" class="has-tooltip" title="" data-original-title="Another link">that link</a>

來源

2015-05-19 10:09:01

如何將twitter引導工具提示添加到圖標

回答

的Javascript

標記

相關問題