Interface Components known as Tooltips

These are the message boxes that appear over a control when an end user hovers over one. You have probably already seen tooltips before in many places on the world wide web. For example when you provide a title attribute for a link or an alt attribute for an image you will usually get that hover effect when viewed in most browsers. These tooltips usually give some useful information about what the link is going to do or what the image is doing in the DOM. It's relatively easy in jQuery to customize the tooltips. Let's say that we have a simple link:

<a href="someOtherLink.html" title="I will take you to some other link">Simple Link</a>

This is just a basic link; but with jQuery we can really make this pop.

// this handles when we hover over the element
$('.someText').hover(function(expression)
{ var theText = $(this).attr('title');
   $(this).data('theToolTipText', theText).removeAttr('title');
  
   $('<p class="theToolTip"></p>').text(theText).appendTo('body').fadeIn('fast');

 },  // now address when we hover off the element with a callback
 function()
 { $(this).attr('title', $(this).data('theToolTipText'));
    $('.theToolTip').remove();
  });

We have now created a small pop up message letting us know what the title of this link or paragraph is without relying on the alt attribute or similar. We handle the hover out effect by calling the remove method on the element and just like that the message is gone!

How an event propagates

Often in the course of developing a piece of code we will need to observe the flow of an event as it goes through the DOM hierarchy. We will have handlers on elements that will catch the event when it is fired from an element. Once this has happened the event gets passed further up the DOM tree, which means that parent elements have a chance to process the event. So for example when you have two divs inside a webpage. One div is inside the other div like:

<div id="firstDiv"> This is an outer div text. <div id="secondDiv"> This is an inner div text. </div> </div>

Now we can add a handler to each div tag. These handlers will simply create an alert letting us know which element was called.

$('div').click(function(){ alert( $(this).attr('id'));  });

So now when we click on the text: This is an outer div text, we get the alert firstDiv. Now the important point is what happens when you click the inner div text: This is an inner div text, which when clicked generates two alerts firstDiv and secondDiv. This is an example of event propagation. You can see the outer div tag only had its alert shown, but the event propagated out of the inner div tag to the outer div tag and had the inner and outer alerts. This is the result of having an event handler associated to the div's parent element. If this outer div was inside another element it would continue to porpagate up the DOM hierarchy until no more parents were available.

Occasionally you don't want an event to propagate past a certain element. In this case a common techinique you will see is just to return false from the event handler, however you can also use the stopPropagation method which as the name describes prevents the event from propagating futher up the DOM heirarchy.