The Yahoo UI Library provides a nifty helper for creating tooltips. I started playing around with it when I wanted to add the same tooltip to a large number of elements on a page. What got me interested in this implementation, is the ability to use the same tooltip on a number of elements, rather than having each element have it's own tooltip div, or implementation.

The tooltip library creates a div element for each tooltip when the document loads. I wanted to use the tooltip to display a larger version of an image when a user hovered their mouse over a thumbnail. I did not however want to load all the full sized images when the page loads.

I decided the best way to handle this task was to implement my own tooltip function and create my own panel.

Library Installation

The library has a few Yahoo UI Dependencies:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/container/assets/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/container/container-min.js"></script>

Next, you'll need my tooltip and css files. You can download them here. After the Yahoo dependencies, just add the css and javascript files from my library:

<link href="/css/yh_tooltip.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="/javascript/yh_tooltip.js" ></script>

Usage

The library is pretty easy to use.

  1. Create a div that has the content of your tooltip.

    The Div needs a unique ID. You can, however, use the same div for a number of tooltips. For example, if you have repeating content that has the same tooltip in each section, you don't have to repeat the tooltip div. Just put one tooltip at the bottom of the page instead. You can actually put the tooltip divs anywhere in the HTML document. The tooltip library is agnostic as to their location.

    Give the div "tooltip" class. This simply hides the element from the browser while it isn't being displayed.

    <div id="some_tooltip" class="tooltip">
    Here is the tooltip content <br />
    You can have any html in here you want.
    </div>

  2. Add the tooltip function to your element.

    Now, to have an element display your tooltip, you simply add the createTip function to your element. The parameters are the element (this) and the name of the div that contains your tooltip.

    <a href="somewhere" onmouseover="createTip(this,'some_tooltip');">A link with a tip</a>

    There is an extra parameter that tells whether or not to display the header for the tooltip. Just pass false if you don't want a header. You can also redefine the header style to suit your needs.

    <a href="somewhere" onmouseover="createTip(this,'some_tooltip',false);">A link with a tip</a>

Here is an example.
Same tooltip but no header.

This is an example tooltip.
Put whatever in the div you like.

Like Tables

Photo Loading

Now that I've got a pretty good HTML tooltip library, I can enhance it to display the images like I want. Here are the thumbnails for four featured images from MyDrawings.com (A site I built.):

Now, I want to show the full image when you hold your mouse over one of the images. The tooltip library works just fine for this. If you don't mind loading the full image when you load the html page, you could simply create tooltip divs with the images and then use the tooltip function as described above.

There is a little problem with that approach. Lets say you have a page that has a lot of images. Loading the full images for all those thumbnails would not only make the page render quite slowly but would put a lot of unneeded strain on the web server. Here is what I did to only load the images when they are requested. The idea is that when the tooltip is requested, dynamically create a tooltip div with the real image. Immediately populate a temporary image with a photo loading image, and then when the photo has loaded, replace the loading image with the real image. The following code isn't part of the tooltip library because it is pretty custom to this specific need. You can copy it and modify it to suit your needs if you like though.


var next_photo_id=0;
var photo_urls={};
var imgLoading=new Image();
imgLoading.src='/some/url/for/a/loading/image.jpg';
function createPhotoTip(elem,url) {
 if (!yh_tt || !elem || elem.tt_div ) return ; // already initialized or not ready to initialize yet.
 var photo_id=photo_urls[url];
 if (!photo_id) {
  photo_id=++next_photo_id;
  photo_urls[url]=photo_id;
 }
 if ( !Dom.get('photo_tooltip_for_'+photo_id)) {
  var i;
  i=new Image();
  i.src=url;
  var d=document.createElement ( 'div' );
  d.className='tooltip';
 d.id='photo_tooltip_for_'+photo_id;
 var img=document.createElement ( 'img' );
 img.id='photo_for_'+photo_id;
  img.src=imgLoading.src;
  d.appendChild(img);
 document.body.appendChild(d);
  if (!i.complete) {
   Event.on ( i, 'load', function(e) {
    Dom.get('photo_for_'+photo_id).src=i.src;
   } );
  } else {
   img.src=i.src;
  }
 }
 createTip ( elem, 'photo_tooltip_for_'+photo_id, false );
}

Now, I just use my createPhotoTip function with the mouseover instead of the createTip Function

This gives me a good opportunity to showcase a nice little feature about the tooltip library too. ou scroll these images to close to the bottom of your browser, you'll notice that the tooltips will reposition themselves appropriately so they are withing the viewable area.

Enjoy! Feel free to comment if it isn't quite working or you notice something I could have done a lot better. Those are pretty cool drawings aren't they!