html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<script src="../jquery-1.10.2.min.js" type="text/javascript" charset="utf-8" ></script>
<script src="tip.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="tip.css">
<style type="text/css" media="screen">
      .box,.box1,.box3,.box4 {width: 100px;height:20px;text-align: center;color: #000;border:1px solid #dcdcdc;}
      .box1{margin:0 auto;}
      .box2{width: 50px;height: 20px;text-align: center;color: #000;border:1px solid #000;position: absolute;right:200px;top:200px;overflow: hidden;}
      .box3 {margin-top: 200px;}
       .box4 {position: absolute;right:0px;top:300px;}
</style>
<script type="text/javascript" charset="utf-8">
     $(function(){
        $(".box").m_tip(".m_tip",true);
        $(".box1").m_tip(".m_tip",false);
        $(".box2").m_tip(".m_tip",false);
        $(".box3").m_tip(".m_tip",false);
        $(".box4").m_tip(".m_tip",false);
     })
</script>
</head>

<body>
<div class="box" data-direction="bottom">提示框移动</div>
<div class="box1" data-direction="left">提示框移动</div>
<div class="box2" data-direction="left">提示框移动</div>
<div class="box3" data-direction="right">提示框移动</div>
<div class="box4" data-direction="left">提示框移动</div><div class="m_tip">  <div class="m_tip_bottom" data-border="6"></div>  <span>文字文字</span></div></body></html>

css代码
*{margin:0px;padding:0px;}
   .m_tip {
         background: #555556 none repeat scroll 0 0;
         color: #fff;
         font-size: 12px;
         min-height: 20px;
         line-height: 20px;
         position: absolute;
         text-align: center;
         min-width: 45px;
         display: none;
         padding:4px;
         z-index: 1000;
     }
     .m_tip_bottom {
         border-left: 6px solid #fff;
         height: 0;
         line-height: 0;
         position: absolute;
         width: 0;
     }

js代码
$(function(){
     //target表示提示框的class tag的取值为true or false 用来表示是否显示提示框的边框圆角
     $.fn.m_tip = function(target,tag){
          var that = $(this);
          that.hover(function(){
            var border = parseInt($(target).find(".m_tip_bottom").attr("data-border"));
            var b_w=that.outerWidth();
            var b_h=that.outerHeight();
            var t_w=$(target).outerWidth();
            var t_h=$(target).outerHeight();
            var o_L=that.offset().left;
            var o_T=that.offset().top;
            var m_L=that.offset().left + (b_w - t_w) / 2;
            var m_T=that.offset().top -  b_h - border -3;

            //判断是否显示边框圆角
            if( tag ) {
               $(target).css("border-radius",'3px');
            } else {
               $(target).css("border-radius",'0px');
            }
            // 判断提示框显示的方向
            // 
            if( that.attr("data-direction") == 'bottom') {
               $(target).find(".m_tip_bottom").css({
                    'border-bottom' : "6px solid #555556",
                    'border-top' : '0px',
                    'border-left' : '6px solid #fff',
                    'border-right' : '6px solid #fff',
                    'top': -border,
                    'left': t_w / 2 -border
               })
               $(target).css({
                    top: o_T + t_h,
                    left: m_L
               })
            } else if( that.attr("data-direction") == 'top' ) {
                    $(target).find(".m_tip_bottom").css({
                         'border-top' : "6px solid #555556",
                         'border-bottom' : '0px',
                         'border-left' : '6px solid #fff',
                         'border-right' : '6px solid #fff',
                         'left' : t_w / 2 -border,
                         'top' : t_h
                    })
                      $(target).css({
                        left:m_L,
                        top:m_T
                      })
            } else if( that.attr("data-direction") == 'right' ) {
              $(target).find(".m_tip_bottom").css({
                   'border-top' : "6px solid #fff",
                   'border-bottom' : '6px solid #fff',
                   'border-left' : '0px',
                   'border-right' : '6px solid #555556',
                    'left' : - border,
                    'top' : ( t_h - border ) / 2 -3
              })
                $(target).css({
                  left:b_w + border,
                  top:o_T - ( t_h - b_h ) / 2
                })
            } else if( that.attr("data-direction") == 'left' ) {
              $(target).find(".m_tip_bottom").css({
                   'border-top' : "6px solid #fff",
                   'border-bottom' : '6px solid #fff',
                   'border-left' : '6px solid #555556',
                   'border-right' : '0px',
                    'left' : t_w,
                    'top' : ( t_h - border ) / 2 -3
              })
                $(target).css({
                  left:o_L - t_w - border,
                  top:o_T - ( t_h - b_h ) / 2
                })
            }
            $(target).show();
          },function(){
            $(target).hide();
          })
     }

})

一个可以控制提示框显示为top,bottom,left,right的小方法的更多相关文章

  1. 自适应文案提示框、无数据图片加载<IOS小组件>

    非常感谢,帮助我的朋友们,谢谢你们. 该组件的编写仅仅用来不到4个小时,包括测试与修改bug.为他起名为AdaptivePromptDialogBox(就是自适应文案提示框): 呆毛地址:链接 < ...

  2. ASP.NET div信息提示框显示几秒后隐藏

    今天在旧系统中,用户要求,要把一个javascript alert的信息提示,改为Div tag来显示,它在显示时,仅显示几秒,然后隐藏,这样无需用户去点击alert信息框的确定或是关闭铵钮. 下面I ...

  3. Android 入门第一课 一个简单的提示框

    1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...

  4. oracle之 安装oracle指定jdk 或者如何解决提示框显示不全

    在centos7下,安装oracle 11g. gnome的桌面.各个参数配置好后,运行runInstaller命令.此时弹出安装界面,在一次次点击[下一步]的时候,中间会弹出对话框,可是对话框显示不 ...

  5. android7.0后对于detected problems with app native libraries提示框显示

    log信息: 03-27 09:08:25.887   397   400 W linker  : /data/app/com.guagua.qiqi-1/lib/arm/libMedia.so ha ...

  6. 玩魔兽争霸无故退出 提示框显示"0x21101663"指令引用的"0x02704acc"内存该存不能为"read" 确定就会终止程序

    20151002总结:下方法试过,没完全按照说的操作完,觉得有风险且那个read程序执行时间好长的,感觉有点干坏事的意思 ======================================= ...

  7. mongodb GridFS django FileFiled 默认 widget 只有一个文件上传框显示不了字段内容，重写widget

    首先,定位到:FileFiled 默认 widget 源码:mongoadmin包options.py中,如下: # Defaults for formfield_overrides. ModelAd ...

  8. 【Unity笔记】提示框ToolTips大小自适应，及其闪烁的问题

    需求:制作了一个提示框,当鼠标移入背包格子内,显示提示框,且提示框位置跟随鼠标移动.当鼠标移出背包格子,隐藏提示框. 制作提示框ToolTips 因为提示框的大小要求随着显示的文本内容长度而自动大小适 ...

  9. ASP.NET 使用AJAX让GridView的数据行显示提示框（ToolTip）

    介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...

随机推荐

  1. 计算机程序的思维逻辑 (79) - 方便的CompletionService

    上节,我们提到,在异步任务程序中,一种常见的场景是,主线程提交多个异步任务,然后希望有任务完成就处理结果,并且按任务完成顺序逐个处理,对于这种场景,Java并发包提供了一个方便的方法,使用Comple ...

  2. YARN学习总结

    YARN学习总结 前言 YARN(Yet Another Resource Manage,另一种资源协调者)是hadoop-0.23版本引入的的一个新的特性,可以说它是对原有Hadoop Mapred ...

  3. C字符串处理函数

    部分参考百科. C常用字符串函数:字符串输入函数,字符串输出函数,字符串处理函数,标准输入输出流 字符串处理函数: 1.字符串长度:strlen(str),返回字符串实际长度,不包括'\0',返回值类 ...

  4. NSUserDefaults的使用，保存登录状态和设置的轻量本地化存储

    NSDictionary* defaults = [[NSUserDefaults standardUserDefaults] dictionaryRepresentation]; if([[NSUs ...

  5. Linux-配置vim开发环境

    vim是一个类似于vi的著名的功能强大.高度可定制的文本编辑器,在vi的基础上改进和增加了很多特性.vim是纯粹的自由软件. 为了满足使用者的要求,将vim界面配置为自己想要的界面类型也变得流行起来. ...

  6. MOSFET使用与H桥驱动问题

    0.小叙闲言 最开始学习三极管的时候,很注重它的工作原理,后来到了实际应用,就直接把三极管或MOSFET直接当作一个开关器件使用.直到前这几天,接触到MOSFET组成的H桥驱动电路时,发现它纯当作一个 ...

  7. AspNetCore - MVC实战系列（一）

    本章开篇先简单介绍下最近两周自己利用业余时间做的一个图片收集网站,当然这个是靠用户自己上传来收集不是去抓某些个网站的图片,那样没意义,这里我取名为“爱留图”:该网站的简单介绍大家可以参考下上篇的内容爱 ...

  8. Spring数据库访问

    一般采用第三方具有连接缓冲池的数据源实现类:spring支持最常见的两个具有连接缓冲池的数据源为:DBCP和C3P0; DBCP(Database connection pool) 是Apache的一 ...

  9. 生产环境-jvm内存溢出-jprofile问题排查

    首先线上开启了dump的参数 dump的内容有2G,先进行压缩打包,传输至本地(scp) tar -czvf dump.tar java_pid4824.hprof  使用Jprofile打开dump ...

  10. MVC框架中，遇到 [程序集清单定义与程序集引用不匹配]怎么办？

    项目里有一个WinForm程序,它需要使用一套第三方控件.而我的机器上存有这套控件的两种版本(一个是源码版,一个是演示版).结果经常出现“程序集清单定义与程序集引用不匹配的问题”的异常.最要命的是有时 ...