导航

js操作div仿title提示信息效果,增强型title信息提示

Posted on 2010-06-01 10:44  ykhi  阅读(4677)  评论(0)    收藏  举报

<html>
<head>
    <style type="text/css">
      .xstooltip
   {
  visibility: hidden;
  position: absolute;
  top: 0; 
  left: 0;
  z-index: 2;

  font: normal 8pt sans-serif;
  padding: 3px;
  border: solid 1px;
   }
    </style>

</head>


<body>
 <div id="test"   onmouseover="xstooltip_show('tooltip_123', 'test', 0, 20);"    onmouseout="xstooltip_hide('tooltip_123');">显示注释</div>
 <div id="tooltip_123" class="xstooltip">
  <b>学it:</b>www.aspxcs.net<br>
  Time spent: 00:00:08<br/>
  Page viewed: 4<br/>
  Browser: Mozilla – 1.7.11<br/>
  Operating system: Linux - i686 (x86_64)
 </div>
</body>
</html>
<script>
 function xstooltip_findPosX(obj)
 {
   var curleft = 0;
   if (obj.offsetParent)
   {
  while (obj.offsetParent)
   {
    curleft += obj.offsetLeft
    obj = obj.offsetParent;
   }
  }
  else if (obj.x)
   curleft += obj.x;
  return curleft;
 }

 function xstooltip_findPosY(obj)
 {
  var curtop = 0;
  if (obj.offsetParent)
  {
   while (obj.offsetParent)
   {
    curtop += obj.offsetTop
    obj = obj.offsetParent;
   }
  }
  else if (obj.y)
   curtop += obj.y;
  return curtop;
 }

 function xstooltip_show(tooltipId, parentId, posX, posY)
 {
  it = document.getElementById(tooltipId);
  
  if ((it.style.top == '' || it.style.top == 0)
   && (it.style.left == '' || it.style.left == 0))
  {
   // need to fixate default size (MSIE problem)
   it.style.width = it.offsetWidth + 'px';
   it.style.height = it.offsetHeight + 'px';
   
   img = document.getElementById(parentId);
  
   // if tooltip is too wide, shift left to be within parent
   if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
   if (posX < 0 ) posX = 0;
   
   x = xstooltip_findPosX(img) + posX;
   y = xstooltip_findPosY(img) + posY;
   
   it.style.top = y + 'px';
   it.style.left = x + 'px';
  }
  
  it.style.visibility = 'visible';
 }

 function xstooltip_hide(id)
 {
  it = document.getElementById(id);
  it.style.visibility = 'hidden';
 }
</script>