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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
el-form 多层级表单的实现示例
Sep 10 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
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
python抓取搜狗微信公众号文章
2019/04/01 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python接口自动化测试的实现
2020/08/28 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
团日活动总结书格式
2014/05/08 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
JavaScript流程控制(分支)
2021/12/06 Javascript
关于mysql中string和number的转换问题
2022/06/14 MySQL