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 innerHTML 的一些问题的解决方法
Jun 22 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JavaScript数据类型详解
Apr 01 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
js实现页面图片消除效果
Mar 24 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
图书管理程序(三)
2006/10/09 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
实例解析php的数据类型
2018/10/24 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
javascript调试说明
2010/06/07 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python实现拼接图片
2020/03/23 Python
Python如何输出百分比
2020/07/31 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
抗洪抢险事迹材料
2014/05/06 职场文书
旷工辞退通知书
2015/04/17 职场文书
关于倡议书的范文
2015/04/29 职场文书
治庸问责工作总结
2015/08/11 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书