jQuery实现ToolTip元素定位显示功能示例

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_30532837

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量181

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6360403.html

版权

记录下，以备将来用到
 
  <!DOCTYPE html PUBLIC  
  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
  > 
 
  <html xmlns= 
  "http://www.w3.org/1999/xhtml" 
  > 
 
  <head> 
 
  <meta http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=utf-8" 
  /> 
 
  <title>无标题页</title> 
 
  <script type= 
  "text/javascript" 
  src= 
  "jquery-1.4.2.min.js" 
  ></script> 
 
  <script type= 
  "text/javascript" 
  > 
 
  function 
  ShowTip(event,obj,message) 
 
  { 
 
  var 
  xOffset = -10;  
  // x distance from mouse 
 
  var 
  yOffset = 10;  
  // y distance from mouse 
 
  //obj.style.top = (event.clientX + yOffset)+"px"; 
 
  //obj.style.left = (event.clientY + xOffset)+"px"; 
 
  //获取元素width: $(obj).width(); 
 
  //获取元素height：$(obj).height() 
 
  //获取元素位置：$(obj).position().top和$(obj).offset().top 
 
  $( 
  'body' 
  ).append(  
  '<div id="tipmessage">' 
  +message+ 
  '</div>' 
  ); 
 
  $( 
  'div#tipmessage' 
  ).css( 
  "top" 
  , $(obj).position().top+$(obj).height() +  
  "px" 
  ).css( 
  "left" 
  , $(obj).position().left+ 
  "px" 
  ).fadeIn( 
  "slow" 
  ); 
 
  } 
 
  function 
  HideTip() 
 
  { 
 
  $( 
  "div#tipmessage" 
  ).fadeOut( 
  "slow" 
  ).remove(); 
 
  } 
 
  </script> 
 
  <style type= 
  "text/css" 
  > 
 
  #tipmessage 
 
  { 
 
  display:none; 
 
  z-index:1000; 
 
  border:1px solid 
  #448833; 
 
  position:absolute; 
 
  background: 
  #ffffff; 
 
  max-width:200px; 
 
  max-height:30px; 
 
  padding:5px 10px; 
 
  } 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <a href= 
  "#" 
  onmouseover= 
  "ShowTip(event,this,'欢迎访问脚本之家')" 
  onmouseout= 
  "HideTip()" 
  >Tip</a> 
 
  </body> 
 
  </html>