Hi everybody; I'm trying to do some fancy cool-looking tooltip work for a website, and am using some code from O'Reilly's JavaScript
: The Definitive Guide (5th ed) to generate CSS-based tooltips. However, the code I'm using I think exactly as it states to be used, but it doesn't work. Here's the entirety of the JavaScript (also freely available from the book's website - just Google it):
Code:
/**
* Geometry.js: portable functions for querying window and document geometry
*
* This module defines functions for querying window and document geometry.
*
* getWindowX/Y(): return the position of the window on the screen
* getViewportWidth/Height(): return the size of the browser viewport area
* getDocumentWidth/Height(): return the size of the document.
* getHorizontalScroll(): return the position of the horizontal scrollbar
* getVerticalScroll(): return the position of the vertical scrollbar
*
* Note that there is no portable way to query the overall size of the
* browser window, so there are no getWindowWidth/Height() functions.
*
* IMPORTANT: This module must be included in the <body> of a document
* instead of the <head> of the document.
*/
var Geometry = {};
if (window.screenLeft) { // IE and others
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
}
else if (window.screenX) { // Firefox and others
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innerWidth) { // All browsers but IE
Geometry.getViewportWidth = function() { return window.innerWidth; };
Geometry.getViewportHeight = function() { return window.innerHeight; };
Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
Geometry.getVerticalScroll = function() { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
// These functions are for IE6 when there is a DOCTYPE
Geometry.getViewportWidth =
function() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight =
function() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll =
function() { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll =
function() { return document.documentElement.scrollTop; };
}
else if (document.body.clientWidth) {
// These are for IE4, IE5, and IE6 without a DOCTYPE
Geometry.getViewportWidth =
function() { return document.body.clientWidth; };
Geometry.getViewportHeight =
function() { return document.body.clientHeight; };
Geometry.getHorizontalScroll =
function() { return document.body.scrollLeft; };
Geometry.getVerticalScroll =
function() { return document.body.scrollTop; };
}
// These functions return the size of the document. They are not window
// related, but they are useful to have here anyway.
if (document.documentElement && document.documentElemnet.scrollWidth) {
Geometry.getDocumentWidth =
function() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight =
function() { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
Geometry.getDocumentWidth =
function() { return document.body.scrollWidth; };
Geometry.getDocumentHeight =
function() { return document.body.scrollHeight; };
}
/**
* Tooltip.js: simple CSS tooltips with drop shadows.
*
* This module defines a Tooltip class. Create a Tooltip object with the
* Tooltip() constructor. Then make it visible with the show() method.
* When done, hide it with the hide() method.
*
* Note that this module must be used with appropriate CSS class definitions
* to display correctly. The following are examples.
*
* .tooltipShadow {
* background: url(shadow.png); /* translucent shadow * /
* }
*
* .tooltipContent {
* left: -4px; top: -4px; /* how much of the shadow shows * /
* background-color: #ff0; /* yellow background * /
* border: solid black 1px; /* thin black border * /
* padding: 5px; /* spacing between text and border * /
* font: bold 10pt sans-serif; /* small bold font * /
* }
*
* In browsers that support translucent PNG images, it is possible to display
* translucent drop shadows. Other browsers must use a solid color or
* simulate transparency with a dithered GIF image that alternates solid and
* transparent pixels.
*/
function Tooltip() { // The constructor function for the Tooltip class
this.tooltip = document.createElement("div"); // create div for shadow
this.tooltip.style.position = "absolute"; // absolutely positioned
this.tooltip.style.visibility = "hidden"; // starts off hidden
this.tooltip.className = "tooltipShadow"; // so we can style it
this.content = document.createElement("div"); // create div for content
this.content.style.position = "relative"; // relatively positioned
this.content.className = "tooltipContent"; // so we can style it
this.tooltip.appendChild(this.content); // add content to shadow
}
// Set the content and position of the tooltip and display it
Tooltip.prototype.show = function(text, x, y) {
this.content.innerHTML = text; // Set the text of the tooltip.
this.tooltip.style.left = x + "px"; // Set the position.
this.tooltip.style.top = y + "px";
this.tooltip.style.visibility = "visible"; // Make it visible.
// Add the tooltip to the document if it has not been added before
if (this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
// Hide the tooltip
Tooltip.prototype.hide = function() {
this.tooltip.style.visibility = "hidden"; // Make it invisible.
};
// The following values are used by the schedule() method below.
// They are used like constants but are writeable so that you can override
// these default values.
Tooltip.X_OFFSET = 25; // Pixels to the right of the mouse pointer
Tooltip.Y_OFFSET = 15; // Pixels below the mouse pointer
Tooltip.DELAY = 500; // Milliseconds after mouseover
/**
* This method schedules a tooltip to appear over the specified target
* element Tooltip.DELAY milliseconds from now. The argument e should
* be the event object of a mouseover event. This method extracts the
* mouse coordinates from the event, converts them from window
* coordinates to document coordinates, and adds the offsets above.
* It determines the text to display in the tooltip by querying the
* "tooltip" attribute of the target element. This method
* automatically registers and unregisters an onmouseout event handler
* to hide the tooltip or cancel its pending display.
*/
Tooltip.prototype.schedule = function(target, e) {
// Get the text to display. If none, we don't do anything
var text = target.getAttribute("tooltip");
if (!text) return;
// The event object holds the mouse position in window coordinates
// We convert these to document coordinates using the Geometry module
var x = e.clientX + Geometry.getHorizontalScroll();
var y = e.clientY + Geometry.getVerticalScroll();
// Add the offsets so the tooltip doesn't appear right under the mouse
x += Tooltip.X_OFFSET;
y += Tooltip.Y_OFFSET;
// Schedule the display of the tooltip
var self = this; // We need this for the nested functions below
var timer = window.setTimeout(function() { self.show(text, x, y); },
Tooltip.DELAY);
// Also, register an onmouseout handler to hide a tooltip or cancel
// the pending display of a tooltip.
if (target.addEventListener) target.addEventListener("mouseout", mouseout,
false);
else if (target.attachEvent) target.attachEvent("onmouseout", mouseout);
else target.onmouseout = mouseout;
// Here is the implementation of the event listener
function mouseout() {
self.hide(); // Hide the tooltip if it is displayed,
window.clearTimeout(timer); // cancel any pending display,
// and remove ourselves so we're called only once
if (target.removeEventListener)
target.removeEventListener("mouseout", mouseout, false);
else if (target.detachEvent) target.detachEvent("onmouseout",mouseout);
else target.onmouseout = null;
}
}
// Define a single global Tooltip object for general use
Tooltip.tooltip = new Tooltip();
/*
* This static version of the schedule() method uses the global tooltip
* Use it like this:
*
* <a href="www.davidflanagan.com" tooltip="good Java/JavaScript blog"
* onmouseover="Tooltip.schedule(this, event)">David Flanagan's blog</a>
*/
Tooltip.schedule = function(target, e) { Tooltip.tooltip.schedule(target, e); }
However when I use this in Firefox 2 I get the following response from Firebug: "Tooltip.schedule is not a function". Clearly it is, so if anybody has any ideas on what the problem is here, I would greatly appreciate it. Thanks!
