Greetings.

I'm cross referencing another book that's introducing a new or more "appropriate" way of assigning functions to links, div's..etc. I needed an explanation on this example:

This example displays some text when mousing over a link. The text displayed is specifically styled in CSS. The following code references a js file that makes 'event listeners' browser compatible.

The 'title' attribute of the 'anchor' tag has text that the JS code pulls from to display it when moused over.

HTML/CSS Code (main part)
<p><a class="federation" title="Read more..." href="...">James Tiberius Kirk</a> ....(more text)...<a class="federation" title="Read more..." href="...">NCC-1701</a> ...

JavaScript Code (assuming <script type="text/javascript" src="core.js"></script>)

var Tooltips =
{
    init: function()
   {
     var links = document.getElementsByTagName ("a");
     for (var i = 0; i < links.length; i++)
     {
        var title = links[i].getAttribute("title");
        if (title && title.length > 0)
           {
             Core.addEventListener(
                   links[i], "mouseover", Tooltips.showTipListener);
             Core.addEventListener(
                   links[i], "focus", Tooltips.showTipListener);
             Core.addEventListener(
                   links[i], "mouseout", Tooltips.hideTipListener);
             Core.addEventListner(
                   links[i], "blur", Tooltips.hideTipListener);
            }
           }
         },
 
       showTip: function(link)
         {
           Tooltips.hideTip(link);
          var tip = document.createElement ("span");
          tip.className = "tooltip";
          var tipText = document.createTextNode(link.title);
          tip.appendChild(tipText);
          link.appendChild(tip);
          link._tooltip = tip;
          link.title = " ";
 
         // Fix for Safari2/Opera9 repaint issue
         document.documentElement.style.position = "static";
        }
      },
 
       hideTip: function(link)
      {
        if (link._tooltip)
      {
        link.title= link._tooltip.childNodes[0].nodeValue;
        link.removeChild(link._tooltip);
        link._tooltip = null;
 
      // Fix for Safari2/Opera9 repaint issue
     document.documentElement.style.position = "static";
     }
   },
       showTipListener: function(event)
     {
        Tooltips.showTip(this);
        Core.preventDefault(event);
     },
 
      hideTipListener: function(event)
     {
       Tooltips.hideTip(this);
     }
  };
 
Core.start (Tooltips);

My questions are:
1. In the showTipListener: function(event), what does 'this' in Tooltips.showTip(this) represent? Does it represent just 'any' of the links in the "links" array at the beginning of the code? Or does it represent only the links with the 'title' attribute?.

2. What's the purpose of this line: link.title = link._tooltip.childNodes[0].nodeValue;
Why would I need to know the value of the node in order to get rid of it? Couldn't they have done away with that line?

3. Isn't the next line ( link._tooltip = null; ) overkill? So this is saying that after I get rid of it I want to make sure it's gone and nothing is left so I set that space to blank?

Originally Posted by LayneMitch

Core.start (Tooltips);[/code]My questions are:
1. In the showTipListener: function(event), what does 'this' in Tooltips.showTip(this) represent? Does it represent just 'any' of the links in the "links" array at the beginning of the code? Or does it represent only the links with the 'title' attribute?.

In this particular case, this represents the HTML element object which called Tooltips.showTipListener.

Originally Posted by LayneMitch

2. What's the purpose of this line: link.title = link._tooltip.childNodes[0].nodeValue;
Why would I need to know the value of the node in order to get rid of it? Couldn't they have done away with that line?

This script appears to be removing the title attribute from the link when the tip is shown, but with the tip is hidden, it removes the custom tip the script created, and returns the title attribute on the link for the next time you hover over it. If you were to remove this line of code, you'd likely find that the hover effect would only work the first time you hovered over each link.

Originally Posted by LayneMitch

3. Isn't the next line ( link._tooltip = null; ) overkill? So this is saying that after I get rid of it I want to make sure it's gone and nothing is left so I set that space to blank?

This line is just cleanup by the script author. The author chose to store the custom tooltip in a custom attribute on the HTML element object so that it could be easily referenced with link._tooltip. The previous removeChild statement removed the tooltip from the structure of the page, but the link._tooltip still remained. It's good practice to remove things that aren't being used anymore in code, as, in theory, it should help reduce the memory footprint and reduce memory leaks.

Perfect explanation!
I've got it now. So in order to create the "link._tooltip = tip", it had to pull the current title from the link and set the original to " " ...so that it won't be displayed by default.

Then when you hide the "link._tooltip = tip", it reads the value of the title and sets the original back to this title with the line

"link.title = link._tooptip.childNodes[0].nodeValue;"

If I didn't have this line then the original would always be blank and the code will only work once. Cool....