<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. PHP实现Web Service(转)

    1.OAuth OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码)  2.SCA 服务组件 ...

  2. Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 类

    Ruby和其他面向对象的语言一样,使用类来组织方法,然后实例化类,创建对象.1.构造方法使用双引号是字符串的字面构造方法,也可以使用“具名构造方法”,即在类名上调用new方法 >> s=& ...

  3. PAT 1004

    1004. Counting Leaves (30) A family hierarchy is usually presented by a pedigree tree. Your job is t ...

  4. 如何扩大VMware虚拟机的硬盘磁盘空间大小

    首先,在虚拟机配置界面通过界面配置,直接扩大虚拟机硬盘大小: 而后,登陆虚拟机,在windows磁盘管理,更多操作中直接“重新扫描磁盘”,操作系统自动找到了多出来的磁盘空间: 最后,在老磁盘分区上通过 ...

  5. c语言全局变量

    1.全局变量 #include <stdio.h> int L,n; void solve() { // printf("%d",L); printf("%d ...

  6. Asp.Net 之 服务器端控件与客户端控件的区别

    服务器控件,即Asp.Net的控件,控制这些控件必须经过服务器处理,然后响应用户,代码在服务器端解释执行,生成根据用户的浏览器而定的html元素. 客户端控件,即普通Html控件,使用script控制 ...

  7. Sorting It All Out

    Description An ascending sorted sequence of distinct values is one in which some form of a less-than ...

  8. JavaScript 关于this的理解

    this是一个挺神奇的东西,经常不知道它绑定到了那里 ,因此出来了各种绞尽脑汁的面试题. 例1 <script> var person={}; person.name='li'; pers ...

  9. [Visual Studio] 开启Visual Studio 2012通过右键菜单创建单元测试(Unit Test)

    Visual Studio 2012可以说是迄今为止微软VS开发工具中用户体验最好的产品,无论是速度还是体验以及功能,都非常出色,但是,使用了一段时间后发现有一个之前版本VS都有的功能却在Visual ...

  10. CSS skills: 6) auto hide the top bar javascript

    //jquery $(document).ready(function(){ $(window).scroll(function() { $(this).scrollTop() > 10 ? $ ...