jquery的Tooltip插件 qtip使用详细说明

例如：%20
Internet%20Explorer%206.0+%20
Firefox%202.0+%20
Opera%209.0+%20
Safari%203.0+%20
Google%20Chrome%201.0+%20
Konqueror%203.5+%20
使用qTip可以很轻松的定义tip的位置以及样式，同时qTip还有一个强大的API……%20
使用qTip前，只需引入两个JS文件即可：%20
%20%20
<script%20type=”text/javascript”%20src=”jquery-1.3.2.min.js”></script>%20
<script%20type=”text/javascript”%20src=”jquery.qtip-1.0.0-rc3.min.js”></script>%20
%20
下面举几个比较简单的例子。%20
1、Basic%20text%20

html如下所示：%20
%20%20
<div%20id=”content”>%20
<a%20href=”%20″>Basic%20text</a>%20
</div>%20
%20
JS代码：%20
%20%20
<script%20type=”text/javascript”>%20
$(document).ready(function()%20
{%20
$(‘#content%20a[href]’).qtip(%20
{%20
content:%20’Some%20basic%20content%20for%20the%20tooltip’%20
});%20
});%20
</script>%20
%20
效果如图所示：%20

2、Title%20attribute%20
html如下所示：%20
%20%20
<div%20id=”content”>%20
<a%20href=”%20″%20title=”That%20sounds%20familiar…”>Title%20attribute</a>%20
</div>%20
%20
JS代码：%20
%20%20
<script%20type=”text/javascript”>%20
$(document).ready(function()%20
{%20
$(‘#content%20a[href][title]’).qtip({%20
content:%20{%20
text:%20false%20
},%20
style:%20’cream’%20
});%20
});%20
</script>%20
%20
效果如图所示：%20

3、Image%20

html如下所示：%20
%20%20
<div%20id=”content”>%20
<a%20href=”%20″>Image</a>%20
</div>%20
%20
JS代码：%20
%20%20
<script%20type=”text/javascript”>%20
$(document).ready(function()%20
{%20
$(‘#content%20a[href]’).qtip({%20
content:%20′<img%20src=”small.png”%20alt=”Image”%20/>’%20
});%20
});%20
</script>%20
%20
效果如图所示：%20

4、Corner%20values%20
html如下所示：%20
%20%20
<div%20id=”content”%20style=”margin-top:200px;margin-left:200px;”>%20
<a%20href=”%20″>Corner%20values</a>%20
</div>%20
%20
JS代码：%20
%20%20
<script%20type=”text/javascript”>%20
var%20corners%20=%20’bottomLeft’;%20