Treehouse

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!

ydkjs-1.png

Recent Features

  • 5 Awesome New Mozilla Technologies You&#8217;ve Never Heard&nbsp;Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant...

  • Facebook Open Graph META&nbsp;Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and...

  • 6 Things You Didn&#8217;t Know About Firefox&nbsp;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....

Incredible Demos

  • Add Controls to the PHP&nbsp;Calendar

    I showed you how to create a PHP calendar last week. The post was very popular so I wanted to follow it up with another post about how you can add controls to the calendar....

  • Xbox Live Gamer&nbsp;API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame...

  • Create Twitter-Style Buttons with the Dojo&nbsp;Toolkit

    I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial...

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 .tweet(‘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!

Use Code Editor