CSS Tooltip Example
HTML and CSS Code
<html>
<title>Tooltip and Arrow</title>
<link rel="shortcut icon" href="web.png">
<style>
body{background:#C4C4C4;}
.hover {
position:relative;
top:50px;
left:50px;
height:auto;
width:430px;
border:1px solid #333333;
background-color:white;
}
.tooltip {
top:-45px;
background-color:black;
color:white;
padding:8px;
opacity:0;
position:absolute;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
font-family:calibri; font-size:20px;
}
.hover:hover .tooltip {
opacity:1;
-webkit-box-shadow:0px 0px 2px 2px rgba(5,5,5,.5);
}
a{text-decoration:none; display:block; color:black;}
</style>
<body><center>
<div class="hover">
<a href="">
<h2 style="margin:0px; margin-left:5px;">Now you can see your self on mouse over</h2></a>
<div class="tooltip">Your mouse is overed on
</div>
</div></center>
</body>
</html>
