气泡式提示

此气泡式提示部件可快速部署，易于使用，帮你快速的开发出漂亮的页面。

使用方式：

１．当前页面支持DOM模型；

２．链接不但得嵌入在块级的标签中，并且具有title和href两个属性；

３．当鼠标移动经过此链接时，显示美丽的提示。

组成部分：

l2K的javascript文件；

l很少的css文件；

l一张图片；

l简单的四段html即可展示她的芳容。

我们来看看那四段吧。

１．js文件的引用

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1 < scripttype = " text/javascript " src = " BubbleTooltips.js " >< / script>

２．指定有效对象（区域）

我们可以把气泡式提示指定的任意区域，这些区域使用id来标识。

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

源码下载：点击下载

思想指导实践，实践加以应用，应用创造价值