Create Rollover Sidebar Icons

Rollover sidebar icons are quickly becoming a trend. This is done with some simple jQuery that I helped make better. I begun this quest as just a “proof-of-concept”, but several people asked for a blog post about this.

Let’s begin with some basic jQuery. With this code, we are able to change the opacity of the image when a user hovers, and display a tooltip.

$(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”);
});

});

Now that we have the jQuery section completed, we can now work on our CSS. I have changed the CSS for my blog so it would work in my sidebar, and you can feel free to do the same. Here is my CSS code:

.twittertooltip {

/*   margin: 115px auto; */

padding: 0;

width: 60px;

position: relative;

float:left;

}

.twittertooltip em {

background: url(../images/tooltipbg.png) no-repeat;

width: 109px;

height: 51px;

position: absolute;

top: -70px;

left: -3px;

text-align: center;

padding-top:10px;

font-family:Helvetica;

font-weight:normal;

font-style:normal; /* Necessary, Safari automatically makes the text italic */

font-size:10px;

display: none;

text-align:center;

color:#FFF;

}

#twitter-icon {

width:32px;

height:32px;

background: url(http://tplack.com/images/twitter_32.png) no-repeat 0 0; /* Change this to your server, no hotlinking! */

margin: 0 auto;

display: block;

opacity: 0.85;

}

#twitter-icon:hover {

opacity: 1.0;

}

Okay, now our CSS is done. Now to setup our HTML code:

<div class="twittertooltip">
<a href="http://twitter.com/tcslive" id="twitter-icon"></a>
<em>Twitter</em>

</div>

It is now clear that what goes inside of the <em> tag is what text is displayed as the tooltip. Feel free to ask for help in the comments, I will do what I can to help.