Social Icons With Cool jQuery Tooltip

This tutorial will take you through how to create a simple jQuery animated tooltip for social icons such as RSS and Twitter. It shows you how to achieve a nice faded animation that you can change variables such as fade speeds etc. All you need is two images and jQuery!

Step 1

In your js folder make sure you have the two files: jquery.js which you can download here, and a blank tooltip.js which we will be adding our own javascript to.

Step 2

$(document).ready(function(){

		$(".rsstooltip a").hover(function() {
		$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
		}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
		});

		});

$(document).ready(function(){

		$(".twittertooltip a").hover(function() {
		$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
		}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
		});

		});

Inside your blank toolip.js file add this javascript. It may look like a lot, however the code is repeated twice with the variable of the RSS & Twitter logo is changed.

Step 3

		<link rel="stylesheet" href="css/style.css" type="text/css"/>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/tooltip.js" type="text/javascript"></script>

Link your style.css, jquery.js and tooltip.js files to the index.html file in the head tags.

Step 4

	<!-- RSS -->
		<div class="rsstooltip">
			<a href="#" id="rss-icon"></a>
			<em>RSS/em>
		</div>
	<!-- RSS End -->

	<!-- Twitter -->
		<div class="twittertooltip">
			<a href="#" id="twitter-icon"></a>
			<em>Twitter</em>
		</div>
	<!-- Twitter End -->

In your html body add the following code. Give the social icon a wrapping div, within this have your icon div and then your em tag – this will be the bubble that appears on the mouse over. If you check our tooltip.js we coded earlier you will find the variables and divs/classes match this html code. Where the # appears in the anchor tag – replace with your required links.

Step 5

/* RSS */

.rsstooltip {
	   margin: 115px auto;
	   padding: 0;
	   width: 100px;
	   position: relative;
}

.rsstooltip em {
	   background: url(../images/rssbubble.jpg) no-repeat;
	   width: 109px;
	   height: 51px;
	   position: absolute;
	   top: -70px;
	   left: -110px;
	   text-align: center;
	   text-indent: -9999px;
	   z-index: 2;
	   display: none;
}

#rss-icon {
	   width: 72px;
	   height: 71px;
	   background: url(../images/rss.jpg) no-repeat 0 0;
	   text-indent: -9999px;
	   margin: 0 -90px;
	   display: block;
	   opacity: 0.85;
	   float: left;
}

#rss-icon:hover {
	   opacity: 1.0;
}

Now we need to style the html that was just coded. Set the following css to your stylesheet. For each social icon you have you will need to change the class/div names and background images of the icon and em tag. One little effect you can add is to the icons opacity/opacity hover which will work with webkit capable browsers – this will save on the sprites!

All Done

Thats all it takes to get super cool jQuery animated bubble tooltips! If you enjoyed this post, have a alternative way to gain the same effect or have an opinion be sure to comment below. Sharing of this post would also be appreciated.