记录下，以备将来用到

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<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>

jQuery实现ToolTip元素定位显示功能示例的更多相关文章

  1. 利用Xpath和jQuery进行元素定位示例

    利用Selenium在做前端UI自动化的时候,在元素定位方面主要使用了XPATH和jQuery两种方法.XPATH作为主要定位手段,jQuery作为补充定位手段.因为在通过XPATH进行定位的时候,S ...

  2. Selenium2学习-002-Selenium2 Web 元素定位及 XPath 编写演示示例

    此文主要对 Selenium2 的 Web 元素定位及 XPath 编写示例,敬请各位亲们参阅,共同探讨.若有不足之处,敬请各位大神指正,不胜感激! 通过 Firefox(火狐)浏览器的插件 Fire ...

  3. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  4. Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

    元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

  5. java selenium (五) 元素定位大全

    页面元素定位是自动化中最重要的事情, selenium Webdriver 提供了很多种元素定位的方法.  测试人员应该熟练掌握各种定位方法. 使用最简单,最稳定的定位方法. 阅读目录 自动化测试步骤 ...

  6. 史上最全！Selenium元素定位的30种方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  7. selenium8中元素定位方式

    Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度 ...

  8. selenium元素定位篇

    Selenium webdriver是完全模拟用户在对浏览器进行操作,所有用户都是在页面进行的单击.双击.输入.滚动等操作,而webdriver也是一样,所以需要我们指定元素让webdriver进行单 ...

  9. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. textmate常用快捷键备忘

    视图切换 Ctrl + Cmd + F # 折叠第三层 代码编辑 Cmd + Shift + V # 按照历史拷贝顺序来粘贴 Ctrl + Cmd + Option + V # 显示剪贴板 Cmd + ...

  2. [net]netcat 做网络端口监听

    nc命令说明:https://www.cnblogs.com/nmap/p/6148306.html 如下: nc -vz -w domain/ip &> /dev/null & ...

  3. 如何在Linux下Redis安装

    转载出于:http://blog.csdn.net/jiangguilong2000/article/details/8114740 redis作为NoSQL数据库的一种应用,响应速度和命中率上还是比 ...

  4. Lamda表达式的参数捕获，太酷了

    lamda表达式有了参数捕获这个功能,让Action这个委托变得无所不能.Action委托就是无参数,无返回值的一个代理类型. 它只能对应于下面这种类型的函数声明. public void Funct ...

  5. SQLServer 错误: 15404，无法获取有关 Windows NT 组

    右击-属性-所有者改成sa 测试一下   右击 --- 作业开始步骤---执行成功

  6. spring boot @ConditionalOnxxx相关注解总结

    Spring boot @ConditionalOnxxx相关注解总结 下面来介绍如何使用@Condition public class TestCondition implements Condit ...

  7. Mininet的介绍&安装

    Mininet的介绍 Mininet是一个强大的网络仿真平台,通过这个这个平台,我们可以很方便的模拟真实环境中的网络操作与架构.当前SDN/OpenFlow发展的如火如荼,但是在真实网络中又不可以进行 ...

  8. 树莓派 NOOBS 安装系统

    Raspberry Pi Foundation发布了一个名为“New Out of Box Software”(NOOBS)的工具,可以用来方便的安装系统,让我们尝试一下这个新的安装工具. 以我的树莓 ...

  9. 关于Unity中Mecanim动画的动画状态代码控制与代码生成动画控制器

    对于多量的.复杂的.有规律的控制器使用代码生成 动画状态代码控制 1:每个动画状态,比如进入状态,离开状态, 等都有可能需要代码来参与和处理,比如,进入这个动画单元后做哪些事情,来开这个动画单元后做哪 ...

  10. Linux之查看切换Shell

    1.查看存在的shell cat /etc/shells 2.查看使用的shell echo $SHELL 3.切换shell 切换bash chsh -s /bin/bash 切换zsh chsh ...