移动鼠标实现链接文本框提示效果

效果图：

源代码：

<!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>

<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>

<SCRIPT src="TexoTela%20jQuery%20-%20tooltip%20demo_files/jquery-tooltipdemo.js"
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
$(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>&nbsp;</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>&nbsp;</P>
</DIV>
<DIV id=navigation></DIV></DIV>
</DIV>
</BODY></HTML>

由于代码过多，请去 http://dl2.youkuaiyun.com/down4/20070810/10170252823.rar 这里下载使用，，。。。