jquery鼠标滑过提示title具体实现代码


Posted in Javascript onAugust 06, 2013
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
     var x=20;
     var y=0;
     $(".tooltiptt").mouseover(function(e){
     this.mytitle=this.title;
     this.title="";
     var tooltipdi="<div id="tooltipdi"><span><b></b><em></em>"+this.mytitle+"</span></div>";
     $("body").append(tooltipdi);     $("#tooltipdi").css(
     {
     "top": (e.pagey+y) + "px",
     "left": (e.pagex+x) + "px" 
     }
     ).show("fast");
     }).mouseout(function(){
      this.title=this.mytitle;
      $("#tooltipdi").remove(); 
     }).mousemove(function(e){
     $("#tooltipdi").css({
     "top": (e.pagey+y) + "px",
     "left": (e.pagex+x) + "px"
     }); 
     });
 })
 </script>
 <style type="text/css">
 *{ margin:0; padding:0;}
 body{ font:14px "微软雅黑"; line-height:2; color:#333;}
 p{ margin:20px; background:#eee; border-radius:5px; padding:0 10px; cursor:default}
 #tooltipdi{ position:absolute; right:0; top:0; float:left; z-index:99;}
 #tooltipdi span{ font:14px "微软雅黑"; color:#666; float:left; background:#fff; border:1px solid #c8c8c8; padding:6px 12px; border-radius:5px;}
 #tooltipdi span b{ display:block; position:absolute; left:-13px; top:10px; font-size:0; line-height:0; width:0; height:0; border-color:transparent; border-style:dashed; border-width:7px; border-right-color:#c8c8c8; border-right-style:solid;}
 #tooltipdi span em{ display:block; position:absolute; left:-12px; top:10px; font-size:0; line-height:0; width:0; height:0; border-color:transparent; border-style:dashed; border-width:7px; border-right-color:#fff; border-right-style:solid;}
 </style>
 <p title="分数:740分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
 <p title="分数:840分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
 <p title="分数:940分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
 <p title="分数:1040分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
 <p title="分数:1140分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>

效果如下:
jquery鼠标滑过提示title具体实现代码

Javascript 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
jquery弹出关闭遮罩层实例
Aug 06 #Javascript
jquery批量控制form禁用的代码
Aug 06 #Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 #Javascript
intro.js 页面引导简单用法 分享
Aug 06 #Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 #Javascript
IE下JS读取xml文件示例代码
Aug 05 #Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 #Javascript
You might like
php模板中出现空行解决方法
2011/03/08 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
用js实现小球的自由移动代码
2013/04/22 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
招商经理岗位职责
2013/11/16 职场文书
认购协议书范本
2014/04/22 职场文书
家长给学校的建议书
2014/05/15 职场文书
文言文辞职信
2015/02/28 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS