<!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. 推荐：室内定位API - indoor Location API

    indoor.rs 公司近日开放了API,包括免费free的,收费fee的版本. 详情见这里,价格不是很贵哦 Open API支持Android/iOS等移动平台 提供工具,帮助进行地图和WiFi信号 ...

  2. C++经典题目：有n个人围成一圈，顺序排号，然后数数进行淘汰的解法和一些思考

    问题描述: 有n个人围成一圈,顺序排号.从第一个人开始报数(1~3报数),凡报到3的人退出圈子,问最后留下的人原来排在第几号. 分析: 首先由用户输入人数n,然后对这n个人进行编号[因为如果不编号的话 ...

  3. 记录一下自己总结出来的,在内网环境下使用maven打包的各种方法,包括各种常用的打包方式（一）

    (一)内外网代理仓库搭建 想了一下,先用这个MAVEN安装部署的说明随笔,作为自己的第一篇技术帖,往后会陆陆续续将自己研究的心得发出来,留下脚印.希望有大神可以指点 一 .文章主要解决问题说明 1) ...

  4. 前端笔试题目小结--获取输入参数用户名；查询URL字符串参数

    编写一个JavaScript函数getSuffix,用于获得输入参数的后缀名.如输入abc.txt,返回txt. str1 = "abc.txt"; function getSuf ...

  5. iOS 用命令行进行打包

    通过命令行编译打包 第一步,打开终端,输入: cd 把项目文件拖到这里(注意:cd后面要有空格,然后再把项目文件拖进来) 回车 第二步,clean工程(默认release版本),在终端输入: xcod ...

  6. 3种创建、调用JavaScript对象的方法

    hey you guys,两个月没有写技术博客了.作为一名有理想.有抱负的程序员,两个月不写技术博客,真该打.业精于勤,荒于嬉.行成于思,毁于随.勤奋是必不可少的,今后养成一周至少一篇博客的习惯.好了 ...

  7. win32 console application 如何修改图标？

    win32 console application ,不要看这名字高端大气上档次,让你摸不着头脑,其实他就是我们最先学习c语言那种黑色窗口的东西......话说他怎么修改图标呢?第一种方法是:右键-〉 ...

  8. SPI协议总结

    四种工作模式: Mode 0 CPOL=0, CPHA=0 Mode 1 CPOL=0, CPHA=1Mode 2 CPOL=1, CPHA=0 Mode 3 CPOL=1, CPHA=1 常使用Mo ...

  9. vuex构建笔记本应用学习

    vuex:针对vue应用派生的专门管理应用state的工具,state可以理解为我们组件需要操作的data数据,都知道,vue构建spa应用的时候,随着组件规模的提升,各个子组件之间的通信如果采用子组 ...

  10. 网站卡死，照惯例运行.bat批量处理文件进行重启不起作用

    网站卡死,照惯例运行.bat批量处理文件进行重启不起作用,进入虚拟机控制台进行虚拟机重启仍然不起作用,通过ping分析物理服务器能ping通,各个虚拟机之前也能ping通,但是不能ping通外部,分析 ...