Example of jQuery implementing ToolTip element positioning and display function-JS Tutorial-php.cn

Example of jQuery implementing ToolTip element positioning and display function

高洛峰

Release： 2016-12-05 15:34:30

Original

1064 people have browsed it

The example in this article describes how jQuery implements the positioning and display function of ToolTip elements. Share it with everyone for your reference, the details are as follows:

<!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
   $(&#39;body&#39;).append( &#39;<div id="tipmessage">&#39;+message+&#39;</div>&#39;);
   $(&#39;div#tipmessage&#39;).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,&#39;欢迎访问PHP中文网&#39;)" onmouseout="HideTip()">Tip</a>
</body>
</html>

Copy after login