hiyangguo/test.html

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