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


Posted in Javascript onNovember 23, 2016

本文实例讲述了jQuery实现ToolTip元素定位显示功能的方法。分享给大家供大家参考,具体如下:

<!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>

运行效果截图如下:

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

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
domReady的实现案例
Nov 23 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
js实现复制粘贴的两种方法
Dec 04 Javascript
详解jQuery的Cookie插件
Nov 23 #Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 #Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
详解jQuery插件开发方式
Nov 22 #Javascript
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
Javascript学习指南
2014/12/01 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python调用java的jar包方法
2018/12/15 Python
pycharm配置git(图文教程)
2019/08/16 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
python list的index()和find()的实现
2020/11/16 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
酒店前台接待岗位职责
2013/12/03 职场文书
红旗方阵解说词
2014/02/12 职场文书
行政专员求职信范文
2014/05/03 职场文书
北京故宫导游词
2015/01/31 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS