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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jquery获取radio值实例
Oct 16 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
js 编写规范
2010/03/03 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python检查ping终端的方法
2019/01/26 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
校园广播稿精选
2014/10/01 职场文书
2014年督导工作总结
2014/11/19 职场文书
课改心得体会范文
2016/01/25 职场文书