tooltips弹出框制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.time.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
$("#time").countDown(10);
});
</script>
<style type="text/css">
.tooltip {
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
} .tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
} .tooltip:hover {
border: 0; /* IE6 fix */
} .tooltip:hover span {
visibility: visible;
} .tooltip span:before,
.tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
} .tooltip span:before {
border-top-color: #ccc;
bottom: -8px;
}
/**/
.all {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid #1c7ecf;
border-right: 8px solid #1c7ecf;
border-bottom: 8px solid #1c7ecf;
border-left: 8px solid #1c7ecf;
}
.left {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid #1c7ecf;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
}
.right {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #1c7ecf;
}
.top {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1c7ecf;
border-left: 8px solid transparent;
}
.bottom {
margin: 10px;
width:0px;
height:0px;
border-top: 8px solid #1c7ecf;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
</head>
<body>
<div class="all">all</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div id="time"></div>
<br />
<br />
<br />
<a href="#" class="tooltip">
your text
<span>Your custom description</span>
</a>
</body>
</html>
解析如下图:
tooltips弹出框制作的更多相关文章
- Bootboxjs快速制作Bootstrap的弹出框效果
Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...
- 利用layer制作好看的弹出框
一.下载layer http://layer.layui.com/ 二.效果图 三.代码 <!DOCTYPE html> <html lang="en"> ...
- 【Unity技巧】自定义消息框(弹出框)
写在前面 这一篇我个人认为还是很常用的,一开始也是实习的时候学到的,所以我觉得实习真的是一个快速学习工程技巧的途径. 提醒:这篇教程比较复杂,如果你不熟悉NGUI.iTween.C#的回调函数机制,那 ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作
在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popov ...
- 干掉MessageBox,自定义弹出框JMessbox (WindowsPhone)
先上效果图 QQ退出效果 ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
- angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...
随机推荐
- java反射--注解的定义与运用以及权限拦截
自定义注解类编写的一些规则: 1. Annotation型定义为@interface, 所有的Annotation会自动继承java.lang.Annotation这一接口,并且不能再去继承别的类或是 ...
- eclipse format的时候如何让@param后不换行
- C++ lambda 表达式传递的变量默认不可变
我遇到例如以下问题: int count=0; listener->onTouchMoved=[count](Touch* t,Event* e){ count++; log("onT ...
- freemarker字符串转换成日期和时间
freemarker字符串转换成日期和时间 1.日期时间转换总结 (1)date用来转换为日期 (2)time用来转换为时间 (3)datetime用来转换为日期和时间 2.展示演示样例 <#- ...
- Ajax七层模型用途
Ajax七层模型 OSI七层模型满足所有网格模型 1.物理层:符合标准: 2.数据链路层:如网卡.水晶头.连接网络层等: 3.网络层:路由器(数据外围打IP地址): 4.传输层:两台计算器端口的连接: ...
- 业余编程 SQL 编程学习——1 (SQL Server 2008 R2)
1.建立test数据库: 2.创建test1数据表: test1表属性如下: 其中,ID字段设置为标识增量,增量种子为1: 这个实例是实现从第一行数据开始,将每一行最后一个字段值加下一行第二个字段值再 ...
- easyui之datagrid(不定时补充)
1,datagrid之formatter formatter格式化函数有三个参数: value:字段值(一般为后台传递给前台的值): row:当前行数据: index:当前行索引. return值是显 ...
- 初次窥见智能指针auto_ptr和shared_ptr
#include <memory>//shared_ptr要用的头文件 using namespace std; class A //测试auto_ptr和shared_ptr的delet ...
- mysql 5.7.9(GA) 安装
mysql 5.7.9(GA) 终于发布了,感受一下. 一.下载 下载页面 http://dev.mysql.com/downloads/mysql/ 选择相应系统的版本下载. 本文OS为centos ...
- Http服务器性能测试工具ab..
-A auth-username:password 对服务器提供BASIC认证信任.用户名和密码由一个:隔开,并以base64编码形式发送,无论服务器是否需要(即,是否发送了401认证需求代码),此字 ...