案例2:鼠标悬浮弹出气泡

<style>
body {font-family:arial;font-size:12px;text-align:center;}
div#paragraph {width:300px;height:200opx;margin:0 auto;text-align:right}
a {text-decoration:none;cursor:pointer;cursor:hand}
a:hover {color:#000;text-decoration:none;}
.clear {clear:both}
/* Tooltip */
#tooltip {
    position:absolute;
    z-index:9999;
    color:#fff;
    font-size:10px;
    width:180px;
}
#tooltip .tipHeader {
    height:8px;
    background:url(images/tipHeader.gif) no-repeat;
}
#tooltip .tipBody {
    background-color:#000;
    padding:5px 5px 5px 15px;
}

#tooltip .tipFooter {
    height:8px;
    background:url(images/tipFooter.gif) no-repeat;
}
</style>

$('a.hha').mouseover(function(e) {
    $this = $(this);
    var tip = $(this).attr('title');
    $(this).attr('title','');
    $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');
    $('#tooltip').fadeIn('500');
    $('#tooltip').fadeTo('10',0.9);
    $count =$this.attr("count");
    local = 'tooltip'+$count
       }).mousemove(function(e) {
            $('#'+local).css('top', e.pageY + 10 );
            $('#'+local).css('left', e.pageX + 20 );
            
        }).mouseout(function() {
            $(this).attr('title',$('.tipBody').html());
            $(this).children('div#tooltip').remove();            
        });       
});

<a class="hha" rel="tooltip<%=i%>" title="<%=staff.getDimission_reson() %>" count="<%=i%>">手动</a></p>  //id循环用于标记不同的值

鼠标事件,显示悬浮窗相关推荐

  1. html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)

    鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...

  2. Android无需权限显示悬浮窗, 兼谈逆向分析app

    前言 最近UC浏览器中文版出了一个快速搜索的功能, 在使用其他app的时候, 如果复制了一些内容, 屏幕顶部会弹一个窗口, 提示一些操作, 点击后跳转到UC, 显示这个悬浮窗不需要申请android. ...

  3. uniapp 来电显示悬浮窗插件(支持锁屏来电) Ba-CallerID

    简介(下载地址) Ba-CallerID 是一款来电显示悬浮窗插件插件. 支持显示.隐藏 支持锁屏来电显示 支持自定义位置显示(上.中.下) 支持拖动(这版不支持,需要的话可以加) 支持申请.判断悬浮 ...

  4. Android越过悬浮窗权限显示悬浮窗

    文/Shawon(简书作者) 原地址 http://www.jianshu.com/p/167fd5f47d5c ,经验证,此方法可以越过大多数手机的悬浮球权限. 但是对MIUI8无效,MIUI8中应 ...

  5. WindowManager解析(二)Android悬浮框无法弹出输入法的原因和无需权限显示悬浮窗

    Android悬浮框无法弹出输入法 最近要研究悬浮窗方面的东西,遇到一个问题,我的悬浮窗里面有一个输入框,但是不弹出输入法,后来找到一个方法: 在WindowManager的实例获取方式不对,之前是这 ...

  6. 小米手机如何显示悬浮窗

    每个android开发者最蛋疼的事情估计应该就是各种手机的适配兼容的问题了,特别是适配小米和魅族的,没办法,别人 有技术就是任性,我们只能忧伤的慢慢搞去. 今天做的应用悬浮窗在小米上不能出现(放在se ...

  7. 安卓java浮层不响应点击事件,Android悬浮窗屏蔽悬浮窗外部所有的点击事件的实例代码...

    Android可以在所有应用上方添加View,就是给WindowManager添加一个View,在创建的View的时候可以给这个View设置LayoutParams(android.view.Wind ...

  8. Android来电,显示悬浮窗

    拦截来电消息的方式有两种: 1.通过接收广播消息.需要Context.registerReceiver(..., TelephonyManager.ACTION_PHONE_STATE_CHANGED ...

  9. android 悬浮窗口禁止横屏显示,悬浮窗强制设置屏幕方向|App开发交流区|研发交流|雨滴科技技术论坛 - Powered by Discuz!...

    最近在做平板上的一个程序,需要配合中通的app来控制扫描与分拣机的转动.然后中通的程序在平板上运行有一个问题, 就是app里设置了强制竖屏,不能跟随系统旋转应用屏幕方向,然后把系统里的屏幕方向写死,虽 ...

  10. android 悬浮窗 miui,MIUI显示悬浮窗

    1. 使用悬浮框 2. 具体实现 package com.pandans.hnairexam; import com.pandans.sunshine.provider.SunShineDB.Book ...

最新文章

  1. log4j.logger java_java – Log4JLogger的根本原因是找不到还是不可用?
  2. 白话Elasticsearch46-深入聚合数据分析之Cardinality Aggs-cardinality去重算法以及每月销售品牌数量统计
  3. IPFS (1) 初步简介
  4. 国内物联网平台初探(七) ——Ablecloud物联网自助开发和大数据云平台
  5. spring mvc controller json数据
  6. SQL性能优化(转)
  7. Python库:wordcloud库介绍、政府工作报告词云、自定义背景词云
  8. Sqoop是一款开源的工具,主要用于在HADOOP(Hive)与传统的数据库(mysql、oracle...)间进行数据的传递...
  9. linux安装snmp显示乱码_Linux安装X Window服务——远程显示GUI
  10. 【语音识别】基于matlab GUI语音识别信号灯图像模拟控制(带面板)【含Matlab源码 757期】
  11. 高等数学第六版上册答案
  12. xxl-job——docker
  13. 我买了一辆奥迪,然后……
  14. 二---------
  15. 定制Github上的小图标/小徽章
  16. Beyond Compare 4.2.10 zhuce
  17. MySQL常用系统名字
  18. 全新出品!阿里 P5 工程师~P8 架构师晋升路线揭秘
  19. 高等代数、矩阵代数笔记整理汇总,超全面
  20. 为什么即使是最聪明的决策者也会掉入过度自信陷阱?

热门文章

  1. 论文投稿指南——中文核心期刊推荐(机械、仪表工业)
  2. QQ无法访问个人文件夹,QQ,wx等程序无法正常启动
  3. 记录每天学习的新知识:Composing builds
  4. 癌症来临,应该怎么办?
  5. 如何学习图像处理(计算机视觉)的一些思考与分享
  6. 科研级试剂材料磷脂聚乙二醇马来酰亚胺 DSPE-PEG-MAL----为华生物
  7. 【目标检测】目标检测中常见的评价指标
  8. JS gkb转utf8(fetch gbk网页是乱码)
  9. [转载] 我叫李小帅
  10. @Select注解动态sql语句