Add custom MooTools tooltips to your site

Featured , ,

I first saw this over at WPelements and loved it. So I decided to show you how I put together cool looking tooltips for one of my friends sites. Tooltips come in handy when you want to add a cool hover effect with information in a small box to links, content areas like posts and in this case thumbnail images.

Check out the demo from Mootools.net

You can download the files you need here: http://mootools.net/download

After you upload those files to your server you will then need to put this code into to your page in between the <head> </head> if you are using TMS or WordPress this will all be in the header.php file.

<script type=”text/javascript” src=”/mootools.js”></script>
<script type=”text/javascript” src=”/tips.js”></script>

After you have done that you will need to add a class and title to the links or images you want to show the tooltip.

To do that you will have to add this class=”tips” title=”Big Title :: the description” to your links or images that you want to see the tooltip with.

Example link with the class and title in red:

<a href=”www.thelink.com/page.html” class=”tips” title=”Big Title :: the description”>


The next part is to customize the look of the tooltip. We will do that with CSS. You will need to add this to your existing CSS style sheet.

.tool-tip {
float:left;
color: #BBB;
width: 265px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 13px;
margin: 0;
color: #FFF;
padding: 8px 8px 4px;
background: url(/images/tips.png) repeat;
border-bottom: 1px solid #FFF;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(/images/tips.png) repeat;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

I added a custom transparent PNG image. You can change that to a background color if you want.

Here is that tips.png, download it if you want and change it to the color you need. I used Fireworks to edit it.

Thats it, now you will have nice looking tooltips for your site.