效果圖：
源代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0050)http://www.texotela.co.uk/code/jquery/tooltipdemo/ -->
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>::TexoTela:: jQuery - tooltip demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>@import url( /css/default.css );
</STYLE>
<!--[if lt IE 7]>
<style type="text/css">
@import "/css/default_ie.css";
</style>
<![endif]-->
<SCRIPT src="TexoTela%20jQuery%20-%20tooltip%20demo_files/jquery-1.1.2.pack.js"
type=text/javascript></SCRIPT>
<!-- saved from url=(0050)http://www.texotela.co.uk/code/jquery/tooltipdemo/ -->
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>::TexoTela:: jQuery - tooltip demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>@import url( /css/default.css );
</STYLE>
<!--[if lt IE 7]>
<style type="text/css">
@import "/css/default_ie.css";
</style>
<![endif]-->
<SCRIPT src="TexoTela%20jQuery%20-%20tooltip%20demo_files/jquery-1.1.2.pack.js"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
$(
function()
{
// drop shadow effect
var $outer = $("#outer");
var width = $outer.css("width");
var css = {
"margin": "12px auto",
"width": $outer.css("width"),
"background": "#073e8f"
}
$outer.css({"width": "auto", "left": -3, "top": -3, "margin": 0}).wrap(document.createElement("div")).parent().css(css).after(document.createElement("div"));
}
);
</SCRIPT>
$(
function()
{
// drop shadow effect
var $outer = $("#outer");
var width = $outer.css("width");
var css = {
"margin": "12px auto",
"width": $outer.css("width"),
"background": "#073e8f"
}
$outer.css({"width": "auto", "left": -3, "top": -3, "margin": 0}).wrap(document.createElement("div")).parent().css(css).after(document.createElement("div"));
}
);
</SCRIPT>
<SCRIPT src="TexoTela%20jQuery%20-%20tooltip%20demo_files/jquery-tooltipdemo.js"
type=text/javascript></SCRIPT>
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(
function()
{
$("a,input").ToolTipDemo("#fef", "#e00");
}
);
</SCRIPT>
$(document).ready(
function()
{
$("a,input").ToolTipDemo("#fef", "#e00");
}
);
</SCRIPT>
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY>
<DIV id=outer>
<DIV id=header>
<H1> </H1></DIV>
<DIV id=inner><DIV id=contents>
<P>鼠標移動到這個鏈接和文本框上，看這個程序的效果</P>
<P><A
title="點擊這個鏈接。。" href="http://hi.baidu.com/mahaibao">連接</A>. Text box:
<INPUT title="輸入你的姓名，但是不好使，只是一個演示">
</P>
<P> </P>
</DIV>
<DIV id=navigation></DIV></DIV>
</DIV>
</BODY></HTML>
<BODY>
<DIV id=outer>
<DIV id=header>
<H1> </H1></DIV>
<DIV id=inner><DIV id=contents>
<P>鼠標移動到這個鏈接和文本框上，看這個程序的效果</P>
<P><A
title="點擊這個鏈接。。" href="http://hi.baidu.com/mahaibao">連接</A>. Text box:
<INPUT title="輸入你的姓名，但是不好使，只是一個演示">
</P>
<P> </P>
</DIV>
<DIV id=navigation></DIV></DIV>
</DIV>
</BODY></HTML>
由於代碼過多，請去http://dl2.csdn.net/down4/20070810/10170252823.rar 這裏下載使用，，。。。