Twitter Bootstrap/Twipsy

我喜歡將Twipsy插件作爲Twitter Boostrap的一部分捆綁在一起的想法，但它似乎無法正常工作。Twitter Bootstrap/Twipsy

這裏有一個的jsfiddle：http://jsfiddle.net/burlesona/DUPyR/

正如你所看到的，使用默認設置由文檔的規定，當你將鼠標懸停在工具尖端錨工具提示出現，但它並沒有消失，當你移開鼠標。

我知道工具提示的外觀依賴於CSS，但在Twitter文檔頁面上，工具提示正在被腳本添加並從DOM中刪除，而在本例和我自己的本地測試中，腳本添加了提示但不會刪除它。

這裏有一個鏈接到該腳本：http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js

任何意見/建議嗎？我很困惑，爲什麼這是表現的。

或者，如果任何人有更好的建議乾淨，輕量級的jQuery工具提示插件，請讓我知道。

謝謝！

來源

2011-10-03 Andrew

正如您所注意到的，您的代碼不工作，因爲您尚未將CSS文件添加到您的資源中。

工作例如：http://jsfiddle.net/DUPyR/1/

因爲在CSS文件中有兩類稱爲

.fade { 
    -moz-transition: opacity 0.15s linear 0s; 
    opacity: 0; 
} 
.fade.in { 
    opacity: 1; 
}

當您在移動鼠標時，工具提示被預先考慮到身體和它得到class="twipsy fade in"的in得到刪除工具提示的隱藏功能使其不可見（opacity=0）。

用最少的CSS工作示例：http://jsfiddle.net/DUPyR/3/

請注意，它不是去除DOM元素作爲最初的例子。對CSS的更多調查肯定會在那裏發現一些亮點。

如果你問我最喜歡的工具提示插件，我使用JörnZaefferer的輕量級工具提示插件（4kb壓縮）。它很適合我的目的。

鏈接在這裏：http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

來源

2011-10-03 06:18:16 naveen

是的，我很難讓彈出工作，但這篇文章幫助我意識到我必須包含「bootstrap.css」（或至少它的一部分）。我想只有像我這樣想使用bootstrap功能的人更有可能遇到這個問題。 –

我不知道爲什麼託普西不工作，但tipsy作品：http://jsfiddle.net/X6H2Y/

醉意是原始的jQuery插件，它是由Twitter的這些修改：基於

（託普西是）由Jason Frame編寫的優秀jQuery.tipsy插件; twipsy是一個更新的版本，它不依賴圖像，使用動畫css3 ，以及標題存儲的數據屬性！

來源

2011-10-03 05:52:57 zengr

或者您可以使用「工具提示」是這樣的：

<div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div> 

<script type='text/javascript'> $(window).load(function(){ $('div[rel=tooltip]').tooltip(); });</script>

REL：http://twitter.github.com/bootstrap/javascript.html#tooltips

來源

2013-03-06 08:21:46 Evan

是啊，這似乎是一個單獨的插件現在可以刪除（2.3 .1在撰寫本文時），但有一個ToolTip plugin隨主bootstrap.js文件，以便應該做你。

來源

2013-04-03 03:03:49

Twitter Bootstrap/Twipsy

回答

相關問題