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加密解密7种方法总结分析
Oct 07 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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的几个常用数字判断函数代码
2012/04/24 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
详解php协程知识点
2018/09/21 PHP
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python黑魔法之编码转换
2016/01/25 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python可以实现栈的结构吗
2020/05/27 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python中封包建立过程实例
2021/02/18 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
自行车租赁公司创业计划书
2014/01/28 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
离婚协议书格式
2015/01/26 职场文书
复兴之路展览观后感
2015/06/02 职场文书
导游带团欢迎词
2015/09/30 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python