STools

STooltip.js

Summary

Display a message that will disapear on a click or after a given time.
Can be attached to an object to show up automaticaly.


Class Summary
STooltip  

/**
  * @fileoverview Display a message that will disapear on a click or after a given time.<br/>
  * Can be attached to an object to show up automaticaly.
  */

/**
  * STooltip is part of the <a href='http://sourceforge.net/projects/STools/'>STools</a>.<br/>
  * <br/>
  * Copyright 2005 STools<br/>
  *<br/>
  * Licensed under the Apache License, Version 2.0 (the "License");<br/>
  * you may not use this file except in compliance with the License.<br/>
  * You may obtain a copy of the License at<br/>
  * <br/>
  *     http://www.apache.org/licenses/LICENSE-2.0<br/>
  * <br/>
  * Unless required by applicable law or agreed to in writing, software<br/>
  * distributed under the License is distributed on an "AS IS" BASIS,<br/>
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.<br/>
  * See the License for the specific language governing permissions and<br/>
  * limitations under the License.<br/>
  * <br/>
  * <br/>
  * STooltip is a class that can create a tooltip message (generaly for help purposes).<br/>
  * <br/>
  * Basic usage:<br/>
  * This class is usefull when you want to provide information on an element when the user put his mouse over it.<br/>
  * Idem when you do not have enough space to write something, you can show it after a short delay.
  * <br/>
  * Works with:<br/>
  * <ul>
  * <li>IE 6.0</li>
  * <li>Moz 1.7</li>
  * <li>FF 1.0</li>
  * </ul>
  * <br/>
  * Limitations:<br/>
  * <ul>
  * <li>Under Windows OS, tooltip stay behind combobox</li>
  * </ul>
  * <br/>
  * @requires SUtilities This class requires that the SUtilities class to be loaded before.
  * @author deltapositive (<a href='mailto:deltapositive@yahoo.fr'>deltapositive@yahoo.fr</a>)
  * @version 1.0
  * @constructor
  */
function STooltip()
{
	this._instance = STooltip._instance++;
	STooltip._instances[this._instance] = this;

	this._event = {};
	
	this._create();
}

/**
  * The instance of document where tooltip is available.
  * @private
  * @type Document
  */
STooltip._document = document;

/** 
  * Number of instances created.<br/>
  * Allow each instance to have a unique id.
  * @private 
  * @type int
  */
STooltip._instance = 0;

/** 
  * All tooltip instances.<br/>
  * The key is the number of instance.<br/>
  * @private 
  * @type Map<int, STooltip>
  */
STooltip._instances = {};

/**
  * The number of instance.
  * @private
  * @type int
  */
STooltip.prototype._instance = 0;

/**
  * The z-index the tooltip will use on next show.<br/>
  * @private
  * @type int
  */
STooltip.prototype._level = 20;

/**
  * The association "event: handler".
  * @private
  * @type map<string, function>
  */
STooltip.prototype._event = null;

/**
  * The time (in ms) the tooltip will stay visible.<br/>
  * The constant STooltip.POPUP_TIME is used if _popuptime is null.
  * @private
  * @type int
  */
STooltip.prototype._popuptime = null;

/**
  * The time (in ms) the tooltip will wait before appearing.<br/>
  * The constant STooltip.WAIT_TIME is used if _popuptime is null.
  * @private
  * @type int
  */
STooltip.prototype._waittime = null;

/**
  * The current timer (if shown with autohide).
  * @private
  * @type int
  */
STooltip.prototype._popupTimeout = null;

/**
  * When the tooltip is popuping up, keeps a pointer on the element.
  * @private
  * @type HTMLElement
  */
STooltip.prototype._popupElement = null;

/**
  * The html element root of the tooltip.
  * @private
  * @type HTMLElement
  */
STooltip.prototype._tooltip = null;

/**
  * The html element over of the tooltip.
  * @private
  * @type HTMLElement
  */
STooltip.prototype._overTooltip = null;

/**
  * The time of the last popdown. Used to know if wait_time should be wait
  * @private
  * @type int
  */
STooltip._lastPopdown = null;

/**
  * This constant determines the time (in ms) tooltips will stay visible on an automatic popup.<br/>
  * Default value is 5000 ms.
  * @type int
  */
STooltip.POPUP_TIME = 5000;

/**
  * This constant determines the time (in ms) tooltips will wait before appearing.<br/>
  * Default value is 500 ms.
  * @type int
  */
STooltip.WAIT_TIME = 500;

/**
  * The name of the css classname (for tooltip) used by default when creating tooltips.
  * @type string
  */
STooltip.CSS_CLASSNAME = "STooltip";

/**
  * The name of the css classname (for the element over the tooltip) used by default when creating tooltips.
  * @type string
  */
STooltip.CSS_CLASSNAME_OVER = "STooltip_Over";

/**
  * When the tooltip is popuped up automatically, it will hide after this time.<br/>
  * The default value is the <code>STooltip.POPUP_TIME</code>.
  * @param {int} time The time in ms after which the tooltip will hide, or null to use <code>STooltip.POPUP_TIME</code>.
  */
STooltip.prototype.setPopupTime = function(time)
{
	this._popuptime = time;
}

/**
  * Before the tooltip is popuped up automatically, it will wait the wait time.<br/>
  * The default value is the <code>STooltip.WAIT_TIME</code>.
  * @param {int} time The time in ms after which the tooltip will show, or null to use <code>STooltip.WAIT_TIME</code>.
  */
STooltip.prototype.setWaitTime = function(time)
{
	this._waittime = time;
}

/**
  * Get the current width setted for the tooltip (not its real).
  * @return The current width.
  * @type int
  */
STooltip.prototype.getWidth = function()
{
	return parseInt(this._overTooltip.style.width);
}

/**
  * Get the current height setted for the tooltip (not its real).
  * @return The current height.
  * @type int
  */
STooltip.prototype.getHeight = function()
{
	return parseInt(this._overTooltip.style.height);
}

/**
  * Change the (minimal) tooltip size.<br/>
  * The effect is immediate on a displayed tooltip.<br/>
  * If the size is bigger than the maximal size, the maximal size will be increased to the size.
  * @param {int} width The width to set.
  * @param {int} height The height to set.
  */
STooltip.prototype.setSize = function(width, height)
{
	this._overTooltip.style.width = width;
	this._overTooltip.style.height = height;
}

/**
  * Get the current left coordinate of the tooltip.
  * @return The current left coordinate.
  * @type int
  */
STooltip.prototype.getLeftPosition = function()
{
	return parseInt(this._overTooltip.style.left);
}

/**
  * Get the current top coordinate of the tooltip.
  * @return The current top coordinate.
  * @type int
  */
STooltip.prototype.getTopPosition = function()
{
	return parseInt(this._overTooltip.style.top);
}

/**
  * Change the tooltip position.<br/>
  * The effect is immediate on a displayed popup.
  * @param {int} left The new left coordinate.
  * @param {int} top The new top eft coordinate.
  */
STooltip.prototype.setPosition = function(left, top)
{
	this._overTooltip.style.left = left;
	this._overTooltip.style.top = top;
}

/**
  * Change the z-index of the tooltip. Default value is 20.<br/>
  * Apply only at show time.<br/>
  * @param {int} level The level to set.
  */
STooltip.prototype.setLevel = function(level)
{
	this._level = level;
}

/**
  * Get the html content of the tooltip.
  * @return The current html content.
  * @type string
  */
STooltip.prototype.getContent = function()
{
	return this._tooltip.innerHTML;
}

/**
  * The the html content of the tooltip.
  * @param {string} html The html to show in the tooltip.
  */
STooltip.prototype.setContent = function(html)
{
	this._tooltip.innerHTML = html;
}

/**
  * Apply a css class to the tooltip.
  * @param {string} className The name of a css class to apply to the tooltip.
  */
STooltip.prototype.setCSSClass = function(className)
{
	this._tooltip.className = className;
}

/**
  * Apply a css class to the element over the tooltip.<br/>
  * Might be set for shadow purposes.
  * @param {string} className The name of a css class to apply to the over element.
  */
STooltip.prototype.setCSSClassForOver = function(className)
{
	this._overTooltip.className = className;
}

/**
  * Set a listener for an event.
  * @param {string} event The name of the event to listen among:
  * <ul><li>"onshow" <code>void function (stooltip)</code>,</li>
  * <li>"onhide" <code>void function (stooltip)</code>,</li>
  * <li>"onpopup" (called before show, when show is coming by an attached element. can cancel the show by return false;) <code>boolean function (stooltip, element)</code>,</li>
  * @param {function} listener The function to call if corresponding event is fired.
  */
STooltip.prototype.setEventListener = function(event, listener)
{
	this._event[event] = listener;
}

/**
  * Attach listeners to the given html element, after the wait time, the tooltip will show.
  * Then after the popup time (or an event) the tooltip will hide itself.
  */
STooltip.prototype.attachToElement = function(htmlElement)
{
	htmlElement.tooltipInstance = this._instance;
	
	SUtilities.attachEvent (htmlElement, "mouseover", STooltip._startTooltip);
	
	SUtilities.attachEvent (htmlElement, "mouseout", STooltip._cancelTooltip);	
	SUtilities.attachEvent (htmlElement, "mousedown", STooltip._cancelTooltip);
	SUtilities.attachEvent (htmlElement, "keydown", STooltip._cancelTooltip);
}

/**
  * Detach all listeners from the given html element.
  */
STooltip.prototype.dettachFromElement = function(htmlElement)
{
	htmlElement.tooltipInstance = null;
	
	SUtilities.detachEvent (htmlElement, "mouseover", STooltip._startTooltip);
	
	SUtilities.detachEvent (htmlElement, "mouseout", STooltip._cancelTooltip);	
	SUtilities.detachEvent (htmlElement, "mousedown", STooltip._cancelTooltip);
	SUtilities.detachEvent (htmlElement, "keydown", STooltip._cancelTooltip);
}

/**
  * Create the internal objects
  * @private
  */
STooltip.prototype._create = function()
{
	// creating the surrounding tooltip
	this._overTooltip = STooltip._document.createElement("div");
		this._overTooltip.style.display = 'none';
		this._overTooltip.style.position = 'absolute';
		this._overTooltip.className = STooltip.CSS_CLASSNAME_OVER;
		STooltip._document.body.appendChild(this._overTooltip);

	// creating the tooltip itself
	this._tooltip = STooltip._document.createElement("div");
		this._tooltip.style.display = '';
		this._tooltip.style.position = 'static';
		this._tooltip.className = STooltip.CSS_CLASSNAME;
		this._overTooltip.appendChild(this._tooltip);		
}

/**
  * Display the tooltip at the last position setted.<br/>
  * Fires the onshow event.
  * @param {boolean} autohide When autohide is on, the tooltip will close automatically after the pop time has exceeded. Default value is false.
  */
STooltip.prototype.show = function(autohide)
{
	if (this._overTooltip.style.display == 'block')
	{
		// already shown
		return;
	}

	// Show the instance	
	this._overTooltip.style.zIndex = this._level;
	this._overTooltip.style.display = 'block';

	// Set the autohide
	if (autohide == true)
	{
		this._popupTimeout = window.setTimeout("STooltip._hide(" + this._instance + ");", 
				this._popuptime != null ? this._popuptime : STooltip.POPUP_TIME);
	}
	else
	{
		this._popupTimeout = null;
	}
	
	// fires onshow event
	if (this._event.onshow != null)
	{
		this._event.onshow(this);
	}
}

/**
  * Hide the tooltip immediately.<br/>
  * Fires the onhide event.
  */
STooltip.prototype.hide = function()
{
	if (this._overTooltip.style.display == 'none')
	{
		// already hidden
		return;
	}
	
	// If this method is called, but a timeout is running
	if (this._popupTimeout != null)
	{
		// Cancel the timeout
		window.clearTimeout(this._popupTimeout);
	}

	// hide
	this._overTooltip.style.display = 'none';
	
	// fires onhide event
	if (this._event.onhide != null)
	{
		this._event.onhide(this);
	}
}

/**
  * Launch the hide method on the instance identified by its number
  * @param {int} instance The number of instance.
  * @private
  */
STooltip._hide = function(instance)
{
	if (STooltip._instances[instance] == null)
		return;
		
	if (STooltip._instances[instance]._popupTimeout != null)
	{
		window.clearTimeout(STooltip._instances[instance]._popupTimeout);
		STooltip._instances[instance]._popupTimeout = null;
	}
	
	STooltip._instances[instance].hide();
	STooltip._lastPopdown = new Date().getTime();
}

/**
  * Launch the show method on the instance identified by its number
  * @param {int} instance The number of instance.
  * @private
  */
STooltip._show = function(instance)
{
	var element = STooltip._instances[instance]._popupElement;
	element.tooltipTimer = null;
	STooltip._instances[instance]._popupElement = null;
	
	if (STooltip._instances[instance]._event.onpopup != null
		&& STooltip._instances[instance]._event.onpopup(STooltip._instances[instance], element) == false)
	{
		// explicitly canceled
		return;
	}
	
	STooltip._instances[instance].setPosition(SUtilities.mouseX + 12, SUtilities.mouseY + 20);
	
	STooltip._instances[instance].show(true);
}

/**
  * For all events for html element attached to tooltips that start the tooltip
  * @private
  */
STooltip._startTooltip = function()
{
	var element = SUtilities.IS_IE ? window.event.srcElement : this;
	var stooltip = STooltip._instances[element.tooltipInstance];
	
	var timeToWait = stooltip._waittime != null ? stooltip._waittime : STooltip.WAIT_TIME;
	
	var currentTime = new Date().getTime()
	if (STooltip._lastPopdown != null && currentTime - STooltip._lastPopdown < 50)
	{
		timeToWait = 10;
	}
	
	element.tooltipTimer = window.setTimeout("STooltip._show(" + element.tooltipInstance + ");", timeToWait);
					
	stooltip._popupElement = element;
}

/**
  * For all events for html element attached to tooltips, that cancel the tooltip
  * @private
  */
STooltip._cancelTooltip = function()
{
	var element = SUtilities.IS_IE ? window.event.srcElement : this;

	if (element.tooltipTimer != null)
	{
		window.clearTimeout(element.tooltipTimer);
		
		element.tooltipTimer = null;
		STooltip._instances[element.tooltipInstance]._popupElement = null;
	}
	else if (STooltip._instances[element.tooltipInstance]._popupTimeout != null)
	{		
		STooltip._hide(element.tooltipInstance);
	}
}

/**
  * Destroy the internal structures.<br/>
  * Do not call, if you want to use after.
  * @private
  */
STooltip.prototype.dispose = function ()
{
	this.hide();
	
	this._event = {};
	this._popupElement = null;
	this._tooltip = null;
	this._overTooltip = null;
	
	STooltip._instances[this._instance] = null;
}

// Test for SUtilities presence
try 
{
	SUtilities;
} 
catch (e)
{
	alert("STooltip needs SUtilities to be imported.");
}

STools

- STools Copyright 2005 -




Documentation generated by JSDoc on Tue Jan 24 21:43:37 2006