萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery插件Tooltipster實現漂亮的工具提示

jQuery插件Tooltipster實現漂亮的工具提示

 Tooltipster是一個輕量級的jQuery工具提示插件,可以快速的幫助你生成漂亮的工具提示。

1,加載jQuery和包括Tooltipster的插件文件

在您下載Tooltipster,移動tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目錄。接下來,加載jQuery和包括您的標簽裡面Tooltipster的CSS和JavaScript文件:

1 2 3 4 5 6 7 8 9 10 <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,設置你的HTML

為了Tooltipster工作,我們首先需要添加.tooltip類(或任何類別/選擇意味著你想使用)的任何元素,我們希望有一個工具提示。接下來,我們將設置標題屬性,無論我們希望我們的提示說。下面是一些例子:
添加工具提示的圖像:

 

代碼如下:
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

 

添加工具提示已經有一個類的鏈接:

 

 代碼如下:
<a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a>

 

添加工具提示一個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

我們要做的最後一件事就是激活插件。要做到這一點,你的結束</ head>前才添加下面的腳本標簽(使用任何選擇你想 - 在這種情況下,我們使用的是.tooltip類):

1 2 3 4 5 6 7 8 <head> ... <script> $(document).ready(function() { $('.tooltip').tooltipster(); }); </script> </head>

總結:

1.工具提示支持HTML標簽內容

2.輕量級

3.靈活高效

4.樣式定義簡單,100%的CSS

5.支持3種主題

6.支持firefox,Chrome,IE7/8/9,Opera,Safari

copyright © 萬盛學電腦網 all rights reserved