jQuery简单实现title提示效果示例


Posted in Javascript onAugust 01, 2016

本文实例讲述了jQuery简单实现title提示效果的方法。分享给大家供大家参考,具体如下:

/*
调用示例:
$(document).ready(function(){
$('.quicktip').quberTip({
 speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
  var defaults = {
    speed: 500,
    xOffset: 10,
    yOffset: 10
  };
  var options = $.extend(defaults, options);
  return this.each(function () {
    var $this = jQuery(this);
    if ($this.attr('title') != undefined) {
      //Pass the title to a variable and then remove it from DOM
      if ($this.attr('title') != '') {
        var tipTitle = ($this.attr('title'));
      } else {
        var tipTitle = 'QuberTip';
      }
      //Remove title attribute
      $this.removeAttr('title');
      $(this).hover(function (e) {
        //      $(this).css('cursor', 'pointer');
        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
        $("#tooltip").css({ "position": "absolute",
          "z-index": "9999",
          "background": "#D3DDF5",
          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
          "padding": "5px",
          "opacity": "0.9",
          "border": "1px solid #A3C0E8",
          "-moz-border-radius": "3px",
          "border-radius": "3px",
          "-webkit-border-radius": "3px",
          "font-weight": "normal",
          "font-size": "12px",
          "display": "none"
        });
        $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
      .css("left", (e.pageX + defaults.yOffset) + "px")
      .fadeIn(options.speed);
      }, function () {
        //Remove the tooltip from the DOM
        $("#tooltip").remove();
      });
      $(this).mousemove(function (e) {
        $("#tooltip")
  .css("top", (e.pageY + defaults.xOffset) + "px")
  .css("left", (e.pageX + defaults.yOffset) + "px");
      });
    }
  });
};

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

Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
JQuery for与each性能比较分析
May 14 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 #Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 #Javascript
jQuery获取与设置iframe高度的方法
Aug 01 #Javascript
jQuery+Pdo编写login登陆界面
Aug 01 #Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 #Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 #Javascript
Three.js学习之几何形状
Aug 01 #Javascript
You might like
PHP连接access数据库
2008/03/27 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP实现验证码校验功能
2017/11/16 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
你真的了解Python的random模块吗?
2017/12/12 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Pytorch之Variable的用法
2019/12/31 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
教师思想工作总结2015
2015/05/13 职场文书
不同意离婚代理词
2015/05/23 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server