hiyangguo · September 2, 2016 05:41 · BigBigWen · Nov 9, 2017 · eason-shsf · Dec 6, 2017
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title></title>
 	<meta charset=gbk />
 	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 	<style>
 		div{
 			margin:10 auto;
 			width:200px;
 			text-align:center;
 		}
 		p{
 			background-color: pink;
 			margin-right: 10px;
 			padding: 10px;
 		}
 		#tooltip{
 			position:absolute;
 			border:1px solid #333;
 			background:#f7f5d1;
 			padding:1px;
 			color:#333;
 			display:none;
 }		
 	</style>
 	<script>
 	//改变默认样式
 	//<![CDATA[
 $(function(){
    var x = 10;  
 	var y = 20;
 	$("p.tooltip").mouseover(function(e){
       	this.myTitle = this.title; //获取默认的title
 		this.title = "";	       //获取后将默认的清空
 	    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建新的 div 元素，在CSS样式中已定义样式
 		$("body").append(tooltip); //把它追加到文档中
 		$("#tooltip").css({
 				"top": (e.pageY+y) + "px",
 				"left": (e.pageX+x)  + "px"
 			}).show("fast");	  //设置x坐标和y坐标，并且快速显示
    }).mouseout(function(){		
 		this.title = this.myTitle;
 		$("#tooltip").remove();   //光标离开时移除 
    })
 })
 //]]>
 	</script>
 </head>
 <body>
 <div>

 	<p title='我是样式'>默认样式</p>
 	<p title='我是样式' class="tooltip">修改样式</p>

 	
 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset=gbk />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<style>
	div{
	margin:10 auto;
	width:200px;
	text-align:center;
	}
	p{
	background-color: pink;
	margin-right: 10px;
	padding: 10px;
	}
	#tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;
	}
	</style>
	<script>
	//改变默认样式
	//<![CDATA[
	$(function(){
	var x = 10;
	var y = 20;
	$("p.tooltip").mouseover(function(e){
	this.myTitle = this.title; //获取默认的title
	this.title = ""; //获取后将默认的清空
	var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建新的 div 元素，在CSS样式中已定义样式
	$("body").append(tooltip); //把它追加到文档中
	$("#tooltip").css({
	"top": (e.pageY+y) + "px",
	"left": (e.pageX+x) + "px"
	}).show("fast"); //设置x坐标和y坐标，并且快速显示
	}).mouseout(function(){
	this.title = this.myTitle;
	$("#tooltip").remove(); //光标离开时移除
	})
	})
	//]]>
	</script>
	</head>
	<body>
	<div>

	<p title='我是样式'>默认样式</p>
	<p title='我是样式' class="tooltip">修改样式</p>


	</div>
	</body>
	</html>