<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>

效果如下:

1个太阳、2个月亮、2个星星,共多少积分呢?

1个太阳、2个月亮、2个星星,共多少积分呢?

1个太阳、2个月亮、2个星星,共多少积分呢?

1个太阳、2个月亮、2个星星,共多少积分呢?

1个太阳、2个月亮、2个星星,共多少积分呢?

鼠标滑过提示title的更多相关文章

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

    jquery鼠标滑过提示title的实现代码. 如下: <script type="text/javascript" src="http://ajax.google ...

  2. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  3. css3—产品列表之鼠标滑过效果

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. 鼠标划过图片title 提示实现

    鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  6. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  7. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  8. 鼠标滑过弹出jquery在线客服

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

随机推荐

  1. Python学习 之 包和模块

    1.rpm -ql python #查看python在计算机中安装了哪些文件 2.模块是一个可以导入的Python脚本文件 包是一堆按目录组织的模块和子包,目录下的__init__.py文件存放了包的 ...

  2. Discuz!X/模板标签说明

    Discuz 模板标签说明 Discuz! 的模板采用近似 PHP 表达式的语法,基本都是可识别的HTML,但涉及到变量和动态内容时,基本形式下: <!-{ 代码内容 }-> 逻辑元素包围 ...

  3. ie提示jquer缺少标识符,字符串或数字

    属性之间是要用","分隔的,但最后一个属性的后面在IE中是不能有的,firefox可有可无. 至于最后的";"是另外一回事了.这是Javascript的语法问题 ...

  4. 琐碎-到底要不要SSH免密码设置

    搭建了很多次hadoop2.2.0了,尝试过很多不同的启动方法.配置参数.位置,其中涉及到到底要不要配置SSH免密码登录的问题 先是搞清楚为什么需要SSH免密码登录 SSH免密码登录操作步骤: ... ...

  5. Android(java)学习笔记106-1:深入分析Java ClassLoader原理

    1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...

  6. Hessian详解

    相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协议,所以它很适合于发送二进制数据.下面演示一个简单的Hessian示例程序.

  7. Adobe Edge Animate--关于全局变量和全局方法的定义

    Adobe Edge Animate--关于全局变量和全局方法的定义 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. BY:sonicxsxs 前文中有关音 ...

  8. [转]W3C 验证 there is no attribute target for this element

    http://validator.w3.org/ 本文转自:http://hi.baidu.com/linkbestlove/item/d7fff865aefa5f0ba1cf0f04 我们要在新窗口 ...

  9. FZU 1686 神龙的难题 (DLX)

    神龙的难题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  10. 【KMP原理】【整理回顾】

    今儿套KMP模板做了个题,敏敏找我讲next[]数组的时候把我问懵了.具体原理都记不清了光靠模板凑得了一时凑不了一世啊,所以再捋一捋顺一顺,这次印象要深刻一点了: KMP与暴力匹配的优化区别就不再提了 ...