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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

Incredible Demos

  • CSS calc

    CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...

  • Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

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!

Recently on David Walsh Blog

  • Introducing Frontend Masters (with Giveaway)

    Hey DWB readers, I'm super happy to sponsor this blog. I've been a long-time reader and fan, since back when David wrote about JavaScript and MooTools back in 2007. ;-) We are in one of the fastest changing, evolving, most lively communities on earth: JavaScript and front-end web...

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...