O'Reilly

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!

Treehouse Learning

Recent Features

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately,...

  • Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...

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');
  10. […] Duplicate the jQuery Homepage Tooltips Using MooTools […]

  11. […] Duplicate the jQuery home page tool tips using MooTools The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools. […]

  12. […] Duplicate the jQuery home page tool tips using MooTools […]

  13. […] Duplicate the jQuery home page tool tips using MooTools […]

  14. […] Duplicate the jQuery home page tool tips using MooTools The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools. […]

  15. […] Duplicate the jQuery home page tool tips using MooTools The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools. […]

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