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实现unicode和字符的互相转换
Jul 18 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
ios中视频的最后一桢问题解决
2019/05/14 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python中static相关知识小结
2018/01/02 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
Java程序员常见面试题
2015/07/16 面试题
人力资源管理毕业生自荐信
2014/06/26 职场文书
经验交流材料格式
2014/12/30 职场文书
银行催款通知书
2015/04/17 职场文书
公司表扬信格式
2015/05/04 职场文书
婚礼家长致辞
2015/07/27 职场文书
2016年离婚协议书范文
2016/03/18 职场文书