Page Stats
Visitor: 538
CSS Tooltip
<html>
<head>
<title>CSS3 Left Tooltip</title>
<style>
span{
background:#f44;
padding:20px;
border-radius:10px;
position:relative;
color:#fff;
right:98%;
width:100px;
visibility:hidden;
}
span:after{
content:"";
width:0px;
height:0px;
border-left:10px solid #f44;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
position:absolute;
left:100%;
}
p{
margin:40px auto;
position:relative;
background:#0C3;
width:200px;
padding:15px;
}
p:hover span{
visibility:visible;
}
</style>
</head>
<body>
<p>TEXT<span>This is a div</span></p>
</body>
</html>
<html>
<head>
<title>CSS3 Right Tooltip</title>
<style>
span{
background:#f44;
padding:20px;
border-radius:10px;
position:relative;
color:#fff;
left:95%;
width:100px;
visibility:hidden;
}
span:after{
content:"";
width:0px;
height:0px;
border-right:10px solid #f44;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
position:absolute;
right:100%;
}
p{
margin: 40px auto;
position:relative;
background:#0C3;
width:200px;
padding:15px;
}
p:hover span{
visibility:visible;
}
</style>
</head>
<body>
<p>TEXT<span>This is a div</span></p>
</body>
</html>
<html>
<head>
<title>CSS3 Top Tooltip</title>
<style>
span{
background:#f44;
padding:20px;
border-radius:10px;
position:relative;
color:#fff;
bottom:70px;
width:100px;
visibility:hidden;
}
span:after{
content:"";
width:0px;
height:0px;
border-top:10px solid #f44;
border-left:10px solid transparent;
border-right:10px solid transparent;
position:absolute;
left:40%;
bottom:-10px;
}
p{
margin:auto;
position:relative;
background:#0C3;
width:200px;
padding:15px;
}
p:hover span{
visibility:visible;
}
</style>
</head>
<body>
<p>TEXT<span>This is a div</span></p>
</body>
</html>
<html>
<head>
<title>CSS3 Bottom Tooltip</title>
<style>
span{
background:#f44;
padding:20px;
border-radius:10px;
position:relative;
color:#fff;
bottom:-70px;
width:100px;
visibility:hidden;
}
span:after{
content:"";
width:0px;
height:0px;
border-bottom:10px solid #f44;
border-left:10px solid transparent;
border-right:10px solid transparent;
position:absolute;
left:40%;
top:-10px;
}
p{
margin: 40px auto;
position:relative;
background:#0C3;
width:200px;
padding:15px;
}
p:hover span{
visibility:visible;
}
</style>
</head>
<body>
<p>TEXT<span>This is a div</span></p>
</body>
</html>