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. android正则表达式隐藏邮箱地址中间字符

    // String emailStr = email.substring(0, email.lastIndexOf("@"));// if (emailStr.length() & ...

  2. python去除文本中的HTML标签

    def SplitHtmlTag(file): with open(file,"r") as f,open("result.txt","w+" ...

  3. mongo数据库基础

    mongodb mongodb特性 分布式文件存储 介与关系数据库和非关系数据库之间 文件存储格式为BSON(一种JSON的扩展) BSON是对二进制格式的JSON的简称,BSON支持文档和数组的嵌套 ...

  4. 关于mpu6050的几个很好的帖子

    最近在研究6050,真是很磨人啊,这个小东西还挺复杂,一个读取程序竟然需要600多行. 这几天连查资料找到了几个很好的帖子,要是以后有人看到这篇帖子,可以避免误入歧途,也可以省去很多时间. 1.阿西莫 ...

  5. CentOS 'mysql/mysql.h': No such file or directory

    需要安装mysql-devel # yum install mysql-devel

  6. Unity UI 基础【译】

    https://unity3d.com/cn/learn/tutorials/topics/best-practices/fundamentals-unity-ui?playlist=30089 理解 ...

  7. SpringMVC是什么?

    一,首先是一个MVC框架. 在web模型中,MVC是一种很流行的框架,通过把Model,View,Controller分离,把较为复杂的web应用分成逻辑清晰的几部分,是为了简化开发,减少出错.还是为 ...

  8. Github--账号重新申请与配置

    2017-04-24 最近洗心革面痛下决心要好好再深入学习一番前端,正好加入了一个外包团队接了份单子,外包项目正在如火如荼地进行着,自己也打算趁这个机会来好好学习总结一番. 但是俗话说得好," ...

  9. OC类的介绍

    类的本质 类的本质其实也是一个对象(类对象) 类对象 类对象再程序运行时一直存在 类对象是一种数据结构,存储类的基本信息:类大小,类名称,类的版本以及消息与函数的映射表等 类对象所保存的信息在程序编译 ...

  10. ReactiveCocoa学习总结(2)

    信号(signal)- RACSignal类 1. 一般表示将来有数据传递,只要有数据改变,信号内部接收到数据,就会马上发出数据. 2. 事件类型: next:发送数据到下一个管道 error:发送数 ...