marcelloinfoweb · October 17, 2017 14:55
diff --git a/index.html b/index.html
 <!-- normally this stuff would be on the html element -->
 <!--[if lt IE 7]>  <div class="ie ie6 lte9 lte8 lte7"> <![endif]-->
 <!--[if IE 7]>     <div class="ie ie7 lte9 lte8 lte7"> <![endif]-->
 <!--[if IE 8]>     <div class="ie ie8 lte9 lte8"> <![endif]-->
 <!--[if IE 9]>     <div class="ie ie9 lte9"> <![endif]-->
 <!--[if gt IE 9]>  <div> <![endif]-->
 <!--[if !IE]><!--> <!--<![endif]-->

 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
 <style type="text/css">
 .wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
 }

 .wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 }

 /* This bridges the gap so you can mouse into the tooltip without it disappearing */
 .wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
 }

 /* CSS Triangles - see Trevor's post */
 .wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
 }

 .wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
 }

 /* IE can just show/hide with no transition */
 .lte8 .wrapper .tooltip {
  display: none;
 }

 .lte8 .wrapper:hover .tooltip {
  display: block;
 }
    </style>
 </head>
 <body>
 <div>
  <div class="wrapper">
    I have a tooltip.
    <div class="tooltip">I am a tooltip!</div>
  </div>
 </div>    
 </body>
 </html>
	<!-- normally this stuff would be on the html element -->
	<!--[if lt IE 7]> <div class="ie ie6 lte9 lte8 lte7"> <![endif]-->
	<!--[if IE 7]> <div class="ie ie7 lte9 lte8 lte7"> <![endif]-->
	<!--[if IE 8]> <div class="ie ie8 lte9 lte8"> <![endif]-->
	<!--[if IE 9]> <div class="ie ie9 lte9"> <![endif]-->
	<!--[if gt IE 9]> <div> <![endif]-->
	<!--[if !IE]><!--> <!--<![endif]-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
	.wrapper {
	text-transform: uppercase;
	background: #ececec;
	color: #555;
	cursor: help;
	font-family: "Gill Sans", Impact, sans-serif;
	font-size: 20px;
	margin: 100px 75px 10px 75px;
	padding: 15px 20px;
	position: relative;
	text-align: center;
	width: 200px;
	-webkit-transform: translateZ(0); /* webkit flicker fix */
	-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
	}

	.wrapper .tooltip {
	background: #1496bb;
	bottom: 100%;
	color: #fff;
	display: block;
	left: -25px;
	margin-bottom: 15px;
	opacity: 0;
	padding: 20px;
	pointer-events: none;
	position: absolute;
	width: 100%;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .25s ease-out;
	-moz-transition: all .25s ease-out;
	-ms-transition: all .25s ease-out;
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out;
	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	}

	/* This bridges the gap so you can mouse into the tooltip without it disappearing */
	.wrapper .tooltip:before {
	bottom: -20px;
	content: " ";
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 100%;
	}

	/* CSS Triangles - see Trevor's post */
	.wrapper .tooltip:after {
	border-left: solid transparent 10px;
	border-right: solid transparent 10px;
	border-top: solid #1496bb 10px;
	bottom: -10px;
	content: " ";
	height: 0;
	left: 50%;
	margin-left: -13px;
	position: absolute;
	width: 0;
	}

	.wrapper:hover .tooltip {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	}

	/* IE can just show/hide with no transition */
	.lte8 .wrapper .tooltip {
	display: none;
	}

	.lte8 .wrapper:hover .tooltip {
	display: block;
	}
	</style>
	</head>
	<body>
	<div>
	<div class="wrapper">
	I have a tooltip.
	<div class="tooltip">I am a tooltip!</div>
	</div>
	</div>
	</body>
	</html>