JavaScript---Tooltip提示（很早以前写的）

最新推荐文章于 2019-01-11 00:28:22 发布

iteye_3846

最新推荐文章于 2019-01-11 00:28:22 发布

阅读量124

点赞数

分类专栏： JavaScript练习文章标签： JavaScript Opera XHTML HTML ViewUI

JavaScript练习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

截图 :

代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 <HEAD>
  <TITLE>提示窗</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
.aaa {
	          background-color :#999 ;
	          text-align : left ;
	          margin : 0 auto ;
	          padding : 0px ;
	          font-size : 13px ;
	          font-family : arial ;
	          color : white ;
	          width : 760px ;
	          height : 32px ;
	          line-height : 32px ;
	          border : none ;
	          font-weight : bold ;
	         cursor : pointer ;
	        
	       }



	#toolTip {
		    border : 1px solid #4e514e ;
		    width : 420px ;
		    height : 32px ;
		    line-height : 32px ;
		    display : none ;
		    position : absolute ;
		    font-size : 12px ;
		    font-family : arial ;
		    background-color : #FFFF77 ;
		    color : black ;
		    padding : 0px ;
		    margin : 0px ;
			text-align : center ;
		} 
  </style>



  <script>
var $ = function(sId){
	return ('string' == typeof sId) ? document.getElementById(sId) : sId ; 
}
function isIE(){
	 return (document.all && window.ActiveXObject && !window.opera) ? true : false ;
}

var createToolTip = function(){
	$("aaa").onmouseover = function(ev){
	var ev = ev || window.event ;
	if(isIE()){
		$("toolTip").style.filter = 'alpha(opacity=75)' ;
	}else{
		$("toolTip").style.opacity = 0.75 ;
	 }
	$("toolTip").style.top = ev.clientY + 'px' ;
	$("toolTip").style.left = ev.clientX + 'px' ;
	$("toolTip").style.display = 'block' ;
  }
	$("aaa").onmousemove = function(ev){
	var ev = ev || window.event ;
	$("toolTip").style.top = ev.clientY + 10 + 'px' ;
	$("toolTip").style.left = ev.clientX + 5 + 'px' ;
 }
	$("aaa").onmouseout = function(){
	$("toolTip").style.display = 'none' ;
	}
}
	window.onload = createToolTip ;
  </script>
 </HEAD>

 <BODY>
<div id="aaa" class="aaa">这是测试数据</div>
<div id='toolTip'>toolTip提示条</div>
 </BODY>
</HTML>