/** * 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: Assign a variable to the constructor in the * This (hopefully) is a work around of a bug in Internet Explorer * Do NOT prefix the assignment with "var" as this will make tt local * * 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: 0px; top: 0px; /* how much of the shadow shows * / * border: solid black 1px; /* thin black border * / * padding: 2px; /* spacing between text and border * / * font: normal 8pt 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 */ this.tooltip = document.createElement("div"); this.tooltip.style.position = "absolute"; this.tooltip.style.visibility = "hidden"; this.tooltip.className = "tooltipContent"; } // Set the content and position of the tooltip and display it // text = HTML text to display Tooltip.prototype.show = function(text, x, y, docelem, parentobjid, backcolor) { this.tooltip.innerHTML = text; // Set the text of the tooltip. var docxpos = 0; var docypos = 0; if (typeof(parentobjid) == 'undefined' || parentobjid == '') { parentobj = document.body; } else { parentobj = document.getElementById(parentobjid); docxpos = -getX(parentobj); docypos = -getY(parentobj); } if (typeof(docelem) != 'undefined' && docelem != '') { docxpos += getX(docelem); docypos += getY(docelem); } // alert(docxpos + ' ' + docypos + ' ' + x + ' ' + y); this.tooltip.style.left = (docxpos + x) + "px"; // Set the position. this.tooltip.style.top = (docypos + y) + "px"; this.tooltip.style.visibility = "visible"; // Make it visible. this.tooltip.style.backgroundColor = "#FFFFD0"; // Default background color if (typeof(backcolor) != 'undefined' && backcolor != '') this.tooltip.style.backgroundColor = backcolor; // Add the tooltip to the document if it has not been added before if (this.tooltip.parentNode != parentobj) parentobj.appendChild(this.tooltip); } // Hide the tooltip Tooltip.prototype.hide = function() { this.tooltip.style.visibility = "hidden"; // Make it invisible. }