此氣泡式提示部件可快速部署，易于使用，幫你快速的開發(fā)出漂亮的頁面。

使用方式：

１． 當(dāng)前頁面支持 DOM 模型；

２． 鏈接不但得嵌入在塊級(jí)的標(biāo)簽中，并且具有 title 和 href 兩個(gè)屬性；

３． 當(dāng)鼠標(biāo)移動(dòng)經(jīng)過此鏈接時(shí)，顯示美麗的提示。

組成部分：

l 2K 的 javascript 文件；

l 很少的 css 文件；

l 一張圖片；

l 簡單的四段 html 即可展示她的芳容。

我們來看看那四段吧。

１． js 文件的引用

２． 指定有效對象（區(qū)域）

我們可以把氣泡式提示指定的任意區(qū)域，這些區(qū)域使用 id 來標(biāo)識(shí)。

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 < scripttype = " text/javascript " >
2 window.onload = function (){enableTooltips( " content " )};
3 < / script>
4
5

３．html 片段

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 < span class ="tooltip" >
2 < span class ="top" > titleofthelink </ span >
3 < b class ="bottom" > urlofthelink,max30chars </ b >
4 </ span >
5
6

４． Css 文件

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 tooltip,.tooltip* { display : block } /* addedbyjavascript */
2 .tooltip { width : 200px ; color : #000 ;
3
4 font : lighter11px/1.3Arial,sans-serif ;
5
6 text-decoration : none ; text-align : center }
7 .tooltipspan.top { padding : 30px8px0 ;
8 background : url(bt.gif)no-repeattop }
9 .tooltipb.bottom { padding : 3px8px15px ; color : #548912 ;
10 background : url(bt.gif)no-repeatbottom }
11
12

源碼下載： 點(diǎn)擊下載

氣泡式提示