<!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弹出框制作的更多相关文章

  1. Bootboxjs快速制作Bootstrap的弹出框效果

    Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...

  2. 利用layer制作好看的弹出框

    一.下载layer http://layer.layui.com/ 二.效果图 三.代码 <!DOCTYPE html> <html lang="en"> ...

  3. 【Unity技巧】自定义消息框(弹出框)

    写在前面 这一篇我个人认为还是很常用的,一开始也是实习的时候学到的,所以我觉得实习真的是一个快速学习工程技巧的途径. 提醒:这篇教程比较复杂,如果你不熟悉NGUI.iTween.C#的回调函数机制,那 ...

  4. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  5. bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作

    在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popov ...

  6. 干掉MessageBox,自定义弹出框JMessbox (WindowsPhone)

    先上效果图                                               QQ退出效果                                           ...

  7. 弹出框layer插件

    有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...

  8. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  9. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

随机推荐

  1. java反射--注解的定义与运用以及权限拦截

    自定义注解类编写的一些规则: 1. Annotation型定义为@interface, 所有的Annotation会自动继承java.lang.Annotation这一接口,并且不能再去继承别的类或是 ...

  2. eclipse format的时候如何让@param后不换行

  3. C++ lambda 表达式传递的变量默认不可变

    我遇到例如以下问题: int count=0; listener->onTouchMoved=[count](Touch* t,Event* e){ count++; log("onT ...

  4. freemarker字符串转换成日期和时间

    freemarker字符串转换成日期和时间 1.日期时间转换总结 (1)date用来转换为日期 (2)time用来转换为时间 (3)datetime用来转换为日期和时间 2.展示演示样例 <#- ...

  5. Ajax七层模型用途

    Ajax七层模型 OSI七层模型满足所有网格模型 1.物理层:符合标准: 2.数据链路层:如网卡.水晶头.连接网络层等: 3.网络层:路由器(数据外围打IP地址): 4.传输层:两台计算器端口的连接: ...

  6. 业余编程 SQL 编程学习——1 (SQL Server 2008 R2)

    1.建立test数据库: 2.创建test1数据表: test1表属性如下: 其中,ID字段设置为标识增量,增量种子为1: 这个实例是实现从第一行数据开始,将每一行最后一个字段值加下一行第二个字段值再 ...

  7. easyui之datagrid(不定时补充)

    1,datagrid之formatter formatter格式化函数有三个参数: value:字段值(一般为后台传递给前台的值): row:当前行数据: index:当前行索引. return值是显 ...

  8. 初次窥见智能指针auto_ptr和shared_ptr

    #include <memory>//shared_ptr要用的头文件 using namespace std; class A //测试auto_ptr和shared_ptr的delet ...

  9. mysql 5.7.9(GA) 安装

    mysql 5.7.9(GA) 终于发布了,感受一下. 一.下载 下载页面 http://dev.mysql.com/downloads/mysql/ 选择相应系统的版本下载. 本文OS为centos ...

  10. Http服务器性能测试工具ab..

    -A auth-username:password 对服务器提供BASIC认证信任.用户名和密码由一个:隔开,并以base64编码形式发送,无论服务器是否需要(即,是否发送了401认证需求代码),此字 ...