jQuery文字提示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
#tooltip{border:1px solid #999;background:Silver; color:#fff;padding:5px;display:none;position:absolute;}
</style>
    <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script type="text/javascript">
        $(function(){           
           var x=0;
           var y=20;
         
           $("a.tooltip").mouseover(function(e){
             this.myTitle= this.title;
             this.title="";
            
             var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
             $("body").append(tooltip);
             $("#tooltip")
                 .css({
                       "top": (e.pageY-x) + "px",
                       "left": (e.pageX+y) + "px"
                     }).show("fast");
           }).mouseout(function(){
               this.title=this.myTitle;
               $("#tooltip").remove();
           }).mousemove(function(e){
              $("#tooltip")
                   .css({
                     "top": (e.pageY-x) + "px",
                     "left": (e.pageX+y) + "px"
                   });
           });
        });
    </script>
</head>
<body>
<p><a href="#" class="tooltip" title="这个是我的超链接提示1.">提示1</a></p>
<p><a href="#" class="tooltip" title="这个是我的超链接提示2.">提示2</a></p>

<p><a href="#" title="自带提示1.">自带提示1</a></p>
<p><a href="#" title="自带提示2.">自带提示2</a></p>

</body>
</html>

你可能感兴趣的:(html,jquery,function,XHTML,Class,border)