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获取地址栏参数
Dec 22 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
javascript继承机制实例详解
Nov 20 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
简单的三步vuex入门
May 20 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python logging日志模块的详解
2017/10/29 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python双向链表原理与实现方法详解
2019/12/03 Python
使用python去除图片白色像素的实例
2019/12/12 Python
旅游管理毕业生自荐信
2013/11/05 职场文书
中学教师岗位职责
2013/11/26 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
新手入门Mysql--概念
2021/06/18 MySQL
Python max函数中key的用法及原理解析
2021/06/26 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript