HTML/CSS Tutorials

CSS3 Tooltip with Animation NO jQuery

Tags: HTML/CSS

Hi guys, this time I have wanted to create a simple tooltip with CSS3 using the animation, the effect is amazing, and the most important thing we will not use any scripts jQuery. I remember that CSS3 Animations are only visible in Firefox, Safari and Chrome, for the other browser the animations not function, but you will have always the tooltip effect, so can always be used in your projects. What do you wait, start reading!

HTML 5

This time again the markup is very simple, clean and easy to learn, we inserted the tag <small> into the tag <a>, this because when we go over with the mouse will appear our tooltip.

<footer id="masterpanel">
    <ul id="mainpanel">
    <li><a href="#" class="dribble"><small>Dribble</small></a></li>
    <li><a href="#" class="forrst"><small>Forrst</small></a></li>
    <li><a href="#" class="facebook"><small>Facebook</small></a></li>
    <li><a href="#" class="twitter"><small>Twitter</small></a></li>
    <li><a href="#" class="google"><small>Google+</small></a></li>
    <li><a href="#" class="linked"><small>LinkedIn</small></a></li>
    </ul>
</footer>

CSS

Now we set fixing the panel to the bottom of the viewport.

body {
	background: #161616 url(pattern_40.gif) top left repeat;
	margin: 0;
	padding: 0;
	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
}

#masterpanel {
	background-color:#161616;
	background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
        background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
	-moz-box-shadow:0 1px 10px #00c6ff;
	-webkit-box-shadow: 0 1px 10px #00c6ff;
	box-shadow:0 1px 10px #00c6ff;
	position:fixed;
	bottom:0;
	left:0;
	z-index:999;
	width:100%;
}

Now we give a style to our unordered list, this is just an example you can experiment as you like.

#masterpanel ul {
	padding:0;
	margin:0;
	float:left;
	width:80%;
	margin:0 10%;
	list-style:none;
	font-size:1em;
}

#masterpanel ul li {
	padding:0;
	margin:0;
	float:left;
	position:relative;
	border-right:1px solid #555;
}

#masterpanel ul li:first-child { border-left:1px solid #555; }

#masterpanel ul li a {
	margin:5px;
	margin-left:20px;
	margin-right:20px;
	float:left;
	height:26px;
	width:26px;
	text-decoration:none;
	color:#333;
	position:relative;
}

Replace the link text with the image.

a.dribble { background:url(_0050_Dribbble.png) no-repeat; width:26px;}
a.forrst 	{ background:url(_0049_Forrst.png) no-repeat; }
a.facebook      { background:url(_0048_Facebook.png) no-repeat;}
a.twitter 	{ background:url(_0046_Twitter.png) no-repeat;}
a.google 	{ background:url(google.png) no-repeat;}
a.linked	{ background:url(_0018_Linkedin.png) no-repeat;}

Now style the tooltip, by defalut the <small> is hidden with a display:none, when on hover over, the tooltip to appear with a display:block;, finally we create the rules for the animation.

#masterpanel a small { 
	background:#000; 
	text-align:center; 
	width:70px; 
	padding:5px; 
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	border-radius:3px; 
	display:none; 
	color:#fff; 
	font-size:0.8em; 
	text-indent:0;
}

#masterpanel a:hover small { 
	display:block; 
	position:absolute; 
	top:0px; 
	left:50%; 
	margin:-40px; 
	z-index:9999; 
	-moz-animation:mymove .25s linear;  
	-webkit-animation:mymove .25s linear; 
} 

The animation is very simple, just take the property transform:scale(x,y); and play with the value to recreate a bounce effect.

@-moz-keyframes mymove {
	0%{ -moz-transform:scale(0,0); opacity:0;}
	50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
	75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
	0%{ -webkit-transform:scale(0,0); opacity:0;}
	50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
	75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -webkit-transform:scale(1,1); opacity:1;}
}

Conclusion

We finished! Thanks to this method in pure CSS3, we have recreated a tooltip without using jQuery. If you have any comments or suggestions please feel free to comment about it.