Duplicate the jQuery Homepage Tooltips Using MooTools

By  on  

The jQuery homepage has a pretty suave tooltip-like effect as seen below:

jQuery Homepage

Here's how to accomplish this same effect using MooTools.


<div id="jq-intro" class="jq-clearfix">
	<h2>jQuery is a new kind of JavaScript Library.</h2>
	<p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. <strong>jQuery is designed to change the way that you write JavaScript.</strong></p>
	<ul class="jq-checkpoints jq-clearfix">
		<li><a href="http://docs.jquery.com/Tutorials" title="Lightweight Footprint" class="jq-thickbox">Lightweight Footprint</a>
			<div class="jq-checkpointSubhead">
				<p>About 18KB in size <em>(Minified and Gzipped)</em></p>
		<li><a href="http://docs.jquery.com/Tutorials" title="CSS3 Compliant" class="jq-thickbox">CSS3 Compliant</a>
			<div class="jq-checkpointSubhead">
				<p>Supports CSS 1-3 selectors and more!</p>
		<li><a href="http://docs.jquery.com/Tutorials" title="Cross-browser" class="jq-thickbox">Cross-browser</a>
			<div class="jq-checkpointSubhead">
				<p>IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome</p>

The above XHTML was taken directly from the jQuery homepage -- no changes.


#jq-intro 			{ padding-top:1em; width:605px; margin:0 auto; }
#jq-intro h2 		{ font-size:1.9em; font-weight:bold; color:#5DB0E6; line-height:1em; }
#jq-intro h2 span.jq-jquery { float:left; width:81px; height:23px; margin-right:.3em; position:relative; }
#jq-intro h2 span.jq-jquery span { position:absolute; left:-999999px; }
#jq-intro p 		{ clear:both; font-size:1.5em; margin:5px 0; font-weight:normal; line-height:1.6; }
#jq-intro ul 		{ padding:1.5em 0; list-style-type:none; }
#jq-intro li 		{ float:left; font-size:1.4em; }
#jq-intro li a 	{ color:#5DB0E6; font-weight:bold; text-decoration:underline; float:left; padding:0 30px 0 23px; }
#jq-intro li p 	{ font-size:12px; }
#jq-intro li 		{ position:relative; }
div.jq-checkpointSubhead { display:none; }
div.jq-checkpointSubhead { /*opacity:0.0001;*/ position:absolute; width:253px; height:54px; background:url(jquery-tooltip.png) 0 0 no-repeat; top:-1.5em; left:-35%; z-index:100; }
div.jq-checkpointSubhead p { font-size:1em; padding:10px 5px 0 50px; color:#AE0001; font-weight:bold; line-height:1.3em; margin:0; cursor:pointer; }

The above CSS has been slightly modified to match the CSS rules already in place on my demo page.

The MooTools JavaScript

/* moo style */
window.addEvent('domready',function() {
	//opacity / display fix
		opacity: 0,
		display: 'block'
	//put the effect in place
	$$('.jq-checkpoints li').each(function(el,i) {
			'mouseenter': function() {
			'mouseleave': function() {

This effect is the epitome of a dynamic yet subtle JavaScript enhancement!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

Incredible Demos

  • MooTools Window Object Dumping

    Ever want to see all of the information stored within the window property of your browser? Here's your chance. The XHTML We need a wrapper DIV that we'll consider a console. The CSS I like making this look like a command-line console. The MooTools JavaScript Depending on what you have loaded...

  • PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...


  1. Actually, you need to set the chain option to properly replicate the effect:

    el.getElement('div').set('tween', {chain: 'wait'});

    I assume .fade('out') is just an alias of .tween('opacity', 0) so it should work.

  2. Sweet article, this is something that will come in handy in future. :)

    Possible typo in the last line of the article: ‘epity’ should be ‘epitome’ ?

  3. @Grant: Thank you — fixed.

  4. @Oskar: Thanks, I’ll give that a shot.

  5. Great, small and useful. Thank you.

  6. Good job!!

  7. I put this all on a test page, called the CSS and JS files, and uploaded it. But it does not work!
    The page is the one I filled out in the “Website:” field, perhaps someone knows what I am doing wrong? I am relatively new to this world!


  8. Performator

    Hi David,
    you don’t need to iterate over the elements with each().
    (and I’m sure you know that ;-) )

    directly write:

    $$('.jq-checkpoints li').addEvents({

    More infos here:


  9. Performator

    ohh and replace:




Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!