zoukankan      html  css  js  c++  java
  • 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;
    			   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;
    				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;
    				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;
    				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;
    				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;
    				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>
    

     

    解析如下图:

  • 相关阅读:
    安卓高级6 拍照或者从相册获取图片 并检测旋转角度或者更新画册扫描
    安卓高级6 玩转AppBarLayout,更酷炫的顶部栏 Toolbar
    安卓高级6 CoordinatorLayout
    安卓高级6 SnackBar
    android addCategory()等说明
    Eclipse如何解决启动慢?
    Java基础知识总结(绝对经典)
    java反射详解 三
    java反射详解 二
    java反射详解 一
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5010054.html
Copyright © 2011-2022 走看看