mawei1191546352
9/2/2016 - 5:41 AM

改变默认title样式

改变默认title样式

test.html
content_copyfile_download
<!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>