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.

The XHTML

<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>
			</div>
		</li>
		<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>
			</div>
		</li>
		<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>
			</div>
		</li>
	</ul>
</div>

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

The CSS

#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
	$$('.jq-checkpointSubhead').setStyles({
		opacity: 0,
		display: 'block'
	});
	//put the effect in place
	$$('.jq-checkpoints li').each(function(el,i) {
		el.addEvents({
			'mouseenter': function() {
				el.getElement('div').fade('in');
			},
			'mouseleave': function() {
				el.getElement('div').fade('out');
			}
		});
	});
});

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

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    CSS Circles

    A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...

  • By
    FileReader API

    As broadband speed continues to get faster, the web continues to be more media-centric.  Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it).  And every social service does...

Discussion

  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!

    tnq

  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:
    http://keetology.com/blog/2009/07/01-up-the-moo-herd-i-playing-fetch#double-dollar

    Thx

  9. Performator

    ohh and replace:

    el.getElement('div').fade('in');
    ...
    el.getElement('div').fade('out');

    with:

    this.getElement('div').fade('in');
    ...
    this.getElement('div').fade('out');

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