jQuery自制提示框tooltip改进版


Posted in Javascript onAugust 01, 2016

自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip!

jQuery自制提示框tooltip改进版

HTML:

<p><a href="#" title="超链接提示1" class="tooltip">提示1</a></p>
<p><a href="#" title="超链接提示2" class="tooltip">提示2</a></p>
<p><a href="#" title="自带超链接提示1">自带超链接提示1</a></p>
<p><a href="#" title="自带超链接提示2">自带超链接提示2</a></p>

CSS:

p a{display: block;width:150px;height:50px;line-height:50px;
    background:#FF3366;color:#fff;border-radius: 3px;text-align: center;}
  #tooltip{position:absolute;width:200px;height:50px;line-height:50px;border:1px solid #ccc;text-align: center;box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}

JQ:

$(function(){
    var x=10,y=20;//使得鼠标相对于tooltip偏离的距离
    $("a.tooltip").mouseover(function(e){
      this.myTitle=this.title;//获取title,临时存储
      this.title="";//避免和原生提示重复

      var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
      $("body").append(tooltip);
      //css()设置样式
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",//e.pageX相对与文档,e.clientX相对于可视区
        "left":(e.pageX+x)+"px",
      }).show("fast");
    }).mouseout(function(){
      this.title=this.myTitle;//重复恢复
      $("#tooltip").remove();//记得要把生成的结点移除掉
    }).mousemove(function(e){
      $("#tooltip").css({
        "left":(e.pageX+x)+"px",
        "top":(e.pageY+y)+"px",
      });
    });
  });

改进版:将上面的tooltip内容加上图片预览!

jQuery自制提示框tooltip改进版

JQ:

$(function(){
    var x=10,y=20;
    $("a.tooltip").mouseover(function(e){
      this.myTitle=this.title;
      this.title="";
      var imgTitle=this.myTitle?"<br/><span id='tooltipspan'>"+this.myTitle+"</span>":"";
      var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";
      $("body").append(tooltip);
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px",
      }).show("fast");
    }).mouseout(function(){
      this.title=this.myTitle;
      $("#tooltip").remove();
    }).mousemove(function(e){
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px",
      })
    });
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
详细讲解JS节点知识
Jan 31 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
angularJS 中input示例分享
Feb 09 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
在vue中实现echarts随窗体变化
Jul 27 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
Three.js学习之文字形状及自定义形状
Aug 01 #Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 #Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 #Javascript
基于原生JS实现图片裁剪
Aug 01 #Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 #Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 #Javascript
AngularJS基础 ng-if 指令用法
Aug 01 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python中遍历文件的3个方法
2014/09/02 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
人事部主管岗位职责
2013/12/26 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
爱心捐款感谢信
2015/01/20 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏