鼠标提示文字

原创

linchqd 2013-11-06 17:26:36 博主文章分类：javascript ©著作权

©著作权归作者所有：来自51CTO博客作者linchqd的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>test</title>
<!--<link type="text/css" rel="stylesheet" href="css/head.css" />-->
<style type="text/css">
      
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></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="这是自带提示1">自带提示2</a></p>
    <script type="text/javascript">
        $(function(){
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function(e){
                this.myTitle = this.title;
                this.title = "";
                var tooltip = "<div id='tooltip' style='position:absolute'>"+this.myTitle+"</div>";
                $("body").append(tooltip);
                $("#tooltip").css({
                        "top": (e.pageY+y) + "px", "left": (e.pageX+x)  + "px" 
                    }).show("fast");
            }).mouseout(function(){
                this.title = this.myTitle;
                $("#tooltip").remove();
            }).mousemove(function(e){
                 $("#tooltip").css({ 
                        "top": (e.pageY+y) + "px", 
                        "left": (e.pageX+x) + "px", 
                          
                    }); 
            });
        })
    </script>
</body>
</html>