<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. debian7编译内核

    第一个步骤“配置内核”. 在这里,我比较建议在发行版默认的config的基础上再进行配置,这样 配置出的内核和发行版本身才会有更好的相容性.比如可以在运行“make menuconfig”之前执行命令 ...

  2. Expectation Maximization and GMM

    Jensen不等式 Jensen不等式给出了积分的凸函数值必定大于凸函数(convex)的积分值的定理.在凸函数曲线上的任意两点间连接一条线段,那么线段会位于曲线之上,这就是将Jensen不等式应用到 ...

  3. launch failed.Binary not found in Linux/Ubuntu解决方案

    Linux下出现launch failed.Binary not found的解决方案: 首先当你把网上关于mingw的解决方案都看晕了的时候,告诉你,别看关于mingw的了.Linux下不用ming ...

  4. linux 安装GCC

    研究生阶段已经开始了一段时间了,选了LINUX深入分析,之前没怎么接触过,感觉还是有点难度的.不,好像是很难. 从学校借了一台电脑,安装了UBUNTU12.04的系统,可是不知道怎么地,这个系统里,没 ...

  5. [转]Speeding Up Websites With YSlow

    本文转自:http://net.tutsplus.com/tutorials/other/speeding-up-websites-with-yslow/ We all know there are ...

  6. 关于MapReduce单词统计的例子:

    要统计的文件的文件名为hello hello中的内容如下 hello you hello me 通过MapReduce程序统计出文件中的各个单词出现了几次.(两个单词之间通过tab键进行的分割) im ...

  7. MSP430常见问题之IO端口类

    Q1:请问430 的I/O 中断能不能可靠的响应60ns 的脉冲信号, 就是来了一个60ns 的脉冲,430 的中断会有丢失吗?A1:端口支持的最高8M的时钟,无法响应这么快的频率. Q2:430是3 ...

  8. 【数学,方差运用,暴力求解】hdu-5037 Galaxy (2014鞍山现场)

    话说这题读起来真费劲啊,估计很多人做不出来就是因为题读不懂...... 从题目中提取的几点关键点: 题目背景就是银河系(Rho Galaxy)中的星球都是绕着他们的质心(center of mass) ...

  9. C#几个经常犯错误汇总

    在我们平常编程中,时间久了有时候会形成一种习惯性的思维方式,形成固有的编程风格,但是有些地方是需要斟酌的,即使是一个很小的错误也可能会导致昂贵的代价,要学会善于总结,从错误中汲取教训,尽量不再犯同样错 ...

  10. sqlserver关于事务

    事务的四个特性: 原子性,一致性,持久性,隔离性 原子性: 原子性:表示事务执行是作为原子,不可分割,整个语句要么执行,要么不执行sqlserver中每一个单独的语句可以看做是包含在事务中每一句本身具 ...