Add custom MooTools tooltips to your site

Add custom MooTools tooltips to your site

Added: April 17th, 2008
Filed under: Featured
Comments 8
Add your comment!
Tags: , ,

About This:

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.


Twitter Facebook MySpace Digg Stumble It!

8 Responses to “Add custom MooTools tooltips to your site”

  1. Daniel Collins says:
    September 16, 2008 at 3:18 am

    Thanks for the simple explanation on how to implement this.

  2. Tooltips Using Only CSS Tooltips Using Only CSS DesignerFied.com says:
    November 13, 2008 at 12:58 am

    [...] tooltips using only CSS. Of course there tons of ways of doing this better. Check out this post on How to add custom Mootools tooltips to your site Tags: CSS, [...]

  3. Arno says:
    January 19, 2009 at 3:24 am

    I can’t download tips.js
    where can i get it?

  4. Jake Hurst says:
    January 19, 2009 at 5:44 pm

    Hi Arno, you can get the file here: http://mootools.net/download

  5. jorge says:
    March 25, 2009 at 11:40 am

    I can’t find tips.js too in the provided link.

  6. Jake Hurst says:
    March 25, 2009 at 1:31 pm

    Here is the links to the js.
    http://demos111.mootools.net/Tips

  7. Eric says:
    March 30, 2009 at 2:08 am

    I agree with the other, making sense out of mootools downloads is pointless. Any way you can ZIP the 2 files up for us that we need like WP-Elements use to have it… (R.I.P WP-Elements)

  8. Custom MooTools Tooltips Download Files - DesignerFied.com says:
    March 30, 2009 at 4:57 am

    [...] Add custom MooTools tooltips to your site Mar.30, 2009 Author: Jake Hurst [...]

Leave a Reply