jQuery插件Tooltipster實現(xiàn)漂亮的工具提示
Tooltipster是一個輕量級的jQuery工具提示插件，可以快速的幫助你生成漂亮的工具提示。
1，加載jQuery和包括Tooltipster的插件文件
在您下載Tooltipster，移動tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目錄。接下來，加載jQuery和包括您的標簽里面Tooltipster的CSS和JavaScript文件：
<head> ... <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> ... </head>
2，設(shè)置你的HTML
為了Tooltipster工作，我們首先需要添加.tooltip類（或任何類別/選擇意味著你想使用）的任何元素，我們希望有一個工具提示。接下來，我們將設(shè)置標題屬性，無論我們希望我們的提示說。下面是一些例子：
添加工具提示的圖像：
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />
添加工具提示已經(jīng)有一個類的鏈接：
添加工具提示一個div：
<div class="tooltip" title="This is my div's tooltip message!">
This div has a tooltip when you hover over it!
</div>
3，激活Tooltipster
我們要做的最后一件事就是激活插件。要做到這一點，你的結(jié)束</ head>前才添加下面的腳本標簽（使用任何選擇你想 - 在這種情況下，我們使用的是.tooltip類）：
<head>
...
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>
</head>
總結(jié)：
1.工具提示支持HTML標簽內(nèi)容
2.輕量級
3.靈活高效
4.樣式定義簡單，100%的CSS
5.支持3種主題
6.支持firefox，Chrome，IE7/8/9，Opera，Safari
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了jQuery中:first選擇器用法,實例分析了:first選擇器的功能、定義及匹配元素時的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery選擇器源碼解讀（八）：addCombinator函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀（八）：addCombinator函數(shù),本文用詳細的注釋解讀了addCombinator函數(shù)的實現(xiàn)源碼,需要的朋友可以參考下2015-03-03
性能優(yōu)化遇到很多細節(jié)問題(for與each性能比較)記錄下來分享給大家，希望對你有所幫助2013-05-05
jquery下為Event handler傳遞動態(tài)參數(shù)的代碼
在jquery cook book里看到一篇給event handler傳遞動態(tài)參數(shù)的文章 感覺挺實用的 跟大家分享下2011-01-01![jQuery中[attribute=value]選擇器用法實例](http://img.jbzj.com/images/xgimg/bcimg4.png)
jQuery中[attribute=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute=value]選擇器用法,實例分析了[attribute=value]選擇器的功能、定義及給定屬性及屬性值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
JQery 漸變圖片導(dǎo)航，效果不錯，非常漂亮。2010-01-01
jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換操作技巧,需要的朋友可以參考下2016-09-09
jQuery確實是一個挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣。2011-04-04
BootStrap下jQuery自動完成的樣式調(diào)整
這篇文章主要介紹了BootStrap下jQuery自動完成的樣式調(diào)整的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了jquery實現(xiàn)界面點擊按鈕彈出懸浮框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03