<TD>里有一行数据 “那片笑声让我想起......”  假设超出规定长度将用......代替,

而现在要通过鼠标移动到......上 显示全部内容,移出则消失。如下图:

<a href='#' onMouseOver='mouseOver(this,event,"+s+");' onMouseOut='mouseOut();'>.....</a>
//data是提示框要显示的全部内容

CSS

.tooltip {
position: absolute;
display: none;
z-index: 9900000;
outline: none;
padding: 5px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
function mouseOver(t,e,data){
//参数含义
//t:指当前对象,即超链接<a>
//e:event事件
//data:要显示的内容
var tooltipHtml = "<div id='tooltip' class='tooltip'>"+data+"</div>";
$(t).append(tooltipHtml); //添加到页面中
$("#tooltip").css({
"top": (e.pageY) + "px",
"left": (e.pageX) + "px"
}).show("fast"); //设置提示框的坐标,并显示
}
function mouseOut(){
$("#tooltip").remove();
}

-----------------------华丽的分割线------------------------------

另一种方法:

<a id="myTip">鼠标移在我上面有惊喜!</a>
$(document).ready(function(){
$("#myTip").mouseover(function(event){
var tooltipHtml = "<div id='tooltip' class='tooltip'>Hello!</div>";
$(this).append(tooltipHtml);
$("#tooltip").css({
"top": (event.pageY) + "px",
"left": ($(this).width()) + "px" //紧跟在内容的后面
}).show("fast"); //设置提示框的坐标,并显示
}).mouseout(function(){
$("#tooltip").remove();
})
})

$(this) :获得当前对象

$(this).width() :获得当前对象的宽度值

event.pageY  :事件在网页中的y轴坐标

jQuery实现鼠标移上弹出提示框,移出消失的更多相关文章

  1. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  2. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  3. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

  4. jQuery - 选中复选框则弹出提示框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  6. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  7. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  8. [转] 在Asp.net前台和后台弹出提示框

    一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...

  9. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

随机推荐

  1. C#程序读取MAC地址的五种方法(转)

    public class GetMac { ///<summary> /// 根据截取ipconfig /all命令的输出流获取网卡Mac ///</summary> ///& ...

  2. 计算4000000000内的最大f(n)=n值---字符串的问题python实现(五岁以下儿童)

    问题: 写一个函数,计算4 000 000 000 以内的最大的那个f(n)=n的值,函数f的功能是统计全部0到n之间全部含有数字1的数字和.比方:f(13)= 6,由于"1"在& ...

  3. 完全用Linux工作,抛弃windows

    录一篇旧文 作者:王垠 完全用Linux工作,抛弃windows 我已经半年没有使用 Windows 的方式工作了.Linux 高效的完成了我所有的工作. GNU/Linux 不是每个人都想用的.如果 ...

  4. WebBrowser控件应用:播放PPT文件

    原文:WebBrowser控件应用:播放PPT文件 一开始想的是用webform来做,用iframe加载文件,把ppt文件另存成htm,然后播放. 可是后来发现,的程序不大容易控制,所以改用winfo ...

  5. 收集的VS2013的使用小技巧( 不断总结中)

    对于经常使用vs的朋友,如果能用键盘直接做的事,还是键盘更便捷点,现在我就把自己遇到的一些给写下来. 1.对一个函数的说明 先写一个函数,以及参数,完成后,在函数上输入///,vs会自动补全说明的信息 ...

  6. Android-Launcher开发之ShortCut(1)

    下面源代码来自Launcher2.3的样例 1.默认每一个应用的主Activity都会自带 <category android:name="android.intent.categor ...

  7. Milo的游戏开发的一些链接资料

    http://www.cnblogs.com/miloyip/default.aspx?page=1 http://www.cnblogs.com/miloyip/archive/2010/06/14 ...

  8. bzoj 1799: [Ahoi2009]self 类似的分布 解读

    [原标题] 1799: [Ahoi2009]self 同类分布 Time Limit: 50 Sec  Memory Limit: 64 MB Submit: 554  Solved: 194 [id ...

  9. Web应用程序整体测试基础——单元测试

    近年来,随着基于B/S结构的大型应用越来越多,Web应用程序测试问题也在逐步完善中.但Web应用程序测试既可以在系统开发中实施,也可以独立于系统单独完成,这取决于Web应用程序的复杂性和多样性.同时程 ...

  10. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...