JQ 超链接提示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;}
ul li{ list-style:none;}
img {border:0 none;}
body {padding:100px;}
.tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius，box-shadow ie9以下都不兼容  */
</style>
<div class="test">
	<a href="#" class="link" title="这是我的超链接提这是我的超<br>
    <strong>链接</strong>提这是我的超链接提这是<img src='img/loading.gif'>我的超<br>
    链接提这是我的超链接提这是我的超链接提示1.">自定义链接提示</a>
    <a href="#" class="link">默认title提示</a>
    <a href="#" class="link" title="自定义TITLE提示2222！！！！">自定义链接提示</a>
    <a href="#" title="原始链接TITLE提示！">原始链接title提示</a> </div>
</body>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	var x=10;
	var y=20;
	$(".link").mouseover(function(e){
		//alert(e.pageX);
		if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性
			this.my_tit=this.title;
			this.title='';
			var tooltip="<div class='tooltip'>"+this.my_tit+"</div>";
			$("body").append(tooltip);
			$(".tooltip").css({
				display:'block',
				left: e.pageX+x,
				top: e.pageY+y
				})
			};
		}).mouseout(function(){
			if(typeof($(this).attr('title'))!='undefined'){
				this.title=this.my_tit;
				$(".tooltip").remove();
			};
		}).mousemove(function(e){// 鼠标移动时跟随
			$(".tooltip").css({
			left: e.pageX+x,
			top: e.pageY+y
		})
	})
});
</script>
</html>
效果图：
猜你喜欢
