Add custom MooTools tooltips to your site
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
The first thing to do is upload the tips.js and the mootools.js to your server. Using the links below right click and save as to 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.
comments
Leave a Reply