Duplicate the jQuery Homepage Tooltips

By  on  

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

jQuery Tooltips

The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there's more CSS than there is jQuery code!  Let's explore how we can duplicate jQuery's tooltip effect.

The HTML

The overall structure includes a wrapping DIV element with each tooltip link featured in a list:

<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>

Note that the UL element has been given a jq-checkpoints CSS class -- we'll use that in a selector for both CSS styling and element collection using jQuery.

The CSS

Like I said...there's more CSS than there will be jQuery code:

#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; 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; }

Most of the CSS is gloss for the overall look.  The important piece is the jq-checkpointSubhead CSS class being positioned absolutely and with an initial display value of none.  That will allow us to use the :hidden selector within jQuery.

The jQuery JavaScript

And now for the jQuery JavaScript:

jQuery(document).ready(function() {
	var duration = 500;
	jQuery('.jq-checkpoints li').hover(
		function(){ jQuery(this).find('div.jq-checkpointSubhead:hidden').fadeIn(duration); },
		function(){ jQuery(this).find('div.jq-checkpointSubhead:visible').fadeOut(duration); }
	);
});

When the use hovers over the list items, the tooltip for the given list item fades in.  When the user leaves the list item, the tooltip fades out.

There you have it.  If you're interested in how to do this with out JavaScript frameworks, read my MooTools and Dojo tutorials!

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

Discussion

  1. perfect work very very usefull thanks a lot

  2. Didn’t think it was that easy, thanks for the post.

  3. There’s no background on the tooltips in PC FF 3.6.8

  4. You could implement the fade-ins using CSS3 transitions and then not have any jQuery code required except for browsers which dont support them.

    .jq-checkpoints li div.jq-checkpointSubhead { 
        opacity:0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    .jq-checkpoints li:hover div.jq-checkpointSubhead { opacity:1; }  ​
    

    And the JS becomes:

    jQuery.support.transition = (function () {
        var thisBody = document.body || document.documentElement,
        thisStyle = thisBody.style,
        support = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;
    
        return support;
    })();
    
    jQuery(document).ready(function() {
        var duration = 500;
        
        if(!jQuery.support.transition)
            jQuery('.jq-checkpoints li').hover(
                function(){ jQuery(this).find('div.jq-checkpointSubhead:hidden').fadeIn(duration); },
                function(){ jQuery(this).find('div.jq-checkpointSubhead:visible').fadeOut(duration); }
            );
    });​
    
  5. Yeah, that’s great!
    Good job! :)

  6. Nice post, check out my tooltip using prototyping: http://www.websanova.com/plugins/websanova/tooltip

  7. Russo
     const getId = id => document.getElementById(id);
    
     function getClass (className) {
      return document.getElementsByClassName(className);
     }
    

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