We would like to know how to create Pure CSS tooltip with CSS3 animation.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a.tooltip {<!-- w w w . j a v a2s . c om-->
position: relative;
color: black;
text-decoration: none;
}
a.tooltip:before {
content: "-";
color: black;
}
a.tooltip span {
padding: 5px 10px;
background: #d1d1b7;
border: 1px solid #c7c7ac;
border-radius: 3px;
min-width: 70px;
position: absolute;
top: 25px;
left: 5px;
color: black;
box-shadow: 0px 1px 0px #fff;
text-align: center;
opacity: 0;
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
a.tooltip span:before {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #d1d1b7;
z-index: 5;
content: " ";
position: absolute;
top: -5px;
left: 48%;
}
a.tooltip span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #c7c7ac;
display: block;
content: " ";
position: absolute;
top: -6px;
left: 48%;
}
a.tooltip:hover span {
opacity: 1;
}
</style>
</head>
<body>
<a class="tooltip" href="#">Download <span>It's a tooltip. </span></a>
</body>
</html>
The code above is rendered as follows: