// Singleton class TooltipWindow
// This class works with special className. The tooltip content could be in your HTML page as an hidden element or
// can be retreive by an AJAX call.
//
// To work, You just need to set two class name on elements that should show tooltips
// - One to say to TooltipManager that this element must have a tooltip ('tooltip' by default)
// - Another to indicate how to find the tooltip content
// It could be html_XXXX if tootltip content is somewhere hidden in your page, XXX must be DOM ID of this hidden element
// It could be ajax_XXXX if tootltip content must be find by an ajax request, XXX will be the string send as id parameter to your server.
// Check samples/tooltips/tooltip.html to see how it works
//
TooltipManager = {
options: {cssClassName: 'tooltip', delayOver: 200, delayOut: 1000, shiftX: 10, shiftY: 10,
className: 'alphacube', width: 200, height: null,
draggable: false, minimizable: false, maximizable: false, showEffect: Element.show, hideEffect: Element.hide, theTitle: ''},
ajaxInfo: null,
elements: null,
showTimer: null,
hideTimer: null,
// Init tooltip manager
// parameters:
// - cssClassName (string) : CSS class name where tooltip should be shown.
// - ajaxOptions (hash) : Ajax options for ajax tooltip.
// For examples {url: "/tooltip/get.php", options: {method: 'get'}}
// see Ajax.Request documentation for details
//- tooltipOptions (hash) : available keys
// - delayOver: int in ms (default 10) delay before showing tooltip
// - delayOut: int in ms (default 1000) delay before hidding tooltip
// - shiftX: int in pixels (default 10) left shift of the tooltip window
// - shiftY: int in pixels (default 10) top shift of the tooltip window
// and All window options like showEffect: Element.show, hideEffect: Element.hide to remove animation
// default: {className: 'alphacube', width: 200, height: null, draggable: false, minimizable: false, maximizable: false}
init: function(cssClassName, ajaxInfo, tooltipOptions) {
TooltipManager.options = Object.extend(TooltipManager.options, tooltipOptions || {});
cssClassName = TooltipManager.options.cssClassName || "tooltip";
TooltipManager.ajaxInfo = ajaxInfo;
TooltipManager.elements = $$("." + cssClassName);
TooltipManager.elements.each(function(element) {
element = $(element)
var info = TooltipManager._getInfo(element);
if (info.ajax) {
element.ajaxId = info.id;
element.ajaxInfo = ajaxInfo;
}
else {
element.tooltipElement = $(info.id);
}
element.observe("mouseover", TooltipManager._mouseOver);
element.observe("mouseout", TooltipManager._mouseOut);
});
Windows.addObserver(this);
},
addHTML: function(element, tooltipElement) {
element = $(element);
tooltipElement = $(tooltipElement);
element.tooltipElement = tooltipElement;
element.observe("mouseover", TooltipManager._mouseOver);
element.observe("mouseout", TooltipManager._mouseOut);
},
addAjax: function(element, ajaxInfo) {
element = $(element);
element.ajaxInfo = ajaxInfo;
element.observe("mouseover", TooltipManager._mouseOver);
element.observe("mouseout", TooltipManager._mouseOut);
},
addURL: function(element, url, width, height) {
element = $(element);
element.url = url;
element.frameWidth = width;
element.frameHeight = height;
element.observe("mouseover", TooltipManager._mouseOver);
element.observe("mouseout", TooltipManager._mouseOut);
},
close: function() {
if (TooltipManager.tooltipWindow)
TooltipManager.tooltipWindow.hide();
},
preloadImages: function(path, images, extension) {
if (!extension)
extension = ".gif";
//preload images
$A(images).each(function(i) {
var image = new Image();
image.src= path + "/" + i + extension;
});
},
_showTooltip: function(element) {
if (this.element == element)
return;
// Get original element
while (element && (!element.tooltipElement && !element.ajaxInfo && !element.url))
element = element.parentNode;
this.element = element;
TooltipManager.showTimer = null;
if (TooltipManager.hideTimer)
clearTimeout(TooltipManager.hideTimer);
var position = Position.cumulativeOffset(element);
var dimension = element.getDimensions();
if (! this.tooltipWindow)
this.tooltipWindow = new Window("__tooltip__", TooltipManager.options);
this.tooltipWindow.hide();
this.tooltipWindow.setLocation(position[1] + dimension.height + TooltipManager.options.shiftY, position[0] + TooltipManager.options.shiftX);
Event.observe(this.tooltipWindow.element, "mouseover", function(event) {TooltipManager._tooltipOver(event, element)});
Event.observe(this.tooltipWindow.element, "mouseout", function(event) {TooltipManager._tooltipOut(event, element)});
// Reset width/height for computation
this.tooltipWindow.height = TooltipManager.options.height;
this.tooltipWindow.width = TooltipManager.options.width;
// Ajax content
if (element.ajaxInfo) {
var p = element.ajaxInfo.options.parameters;
var saveParam = p;
// Set by CSS
if (element.ajaxId) {
if (p)
p += "&id=" + element.ajaxId;
else
p = "id=" + element.ajaxId;
}
element.ajaxInfo.options.parameters = p || "";
this.tooltipWindow.setHTMLContent("");
this.tooltipWindow.setAjaxContent(element.ajaxInfo.url, element.ajaxInfo.options);
element.ajaxInfo.options.parameters = saveParam;
}
// URL content
else if (element.url) {
this.tooltipWindow.setURL(element.url);
this.tooltipWindow.setSize(element.frameWidth, element.frameHeight);
//TETRA
this.tooltipWindow.setTitle(TooltipManager.options.theTitle);
// Set tooltip size
this.tooltipWindow.height = element.frameHeight;
this.tooltipWindow.width = element.frameWidth;
}
// HTML content
else
this.tooltipWindow.setHTMLContent(element.tooltipElement.innerHTML);
if (!element.ajaxInfo) {
this.tooltipWindow.show();
this.tooltipWindow.toFront();
}
},
_hideTooltip: function(element) {
if (this.tooltipWindow) {
this.tooltipWindow.hide();
this.element = null;
}
},
_mouseOver: function (event) {
var element = Event.element(event);
if (TooltipManager.showTimer)
clearTimeout(TooltipManager.showTimer);
TooltipManager.showTimer = setTimeout(function() {TooltipManager._showTooltip(element)}, TooltipManager.options.delayOver)
},
_mouseOut: function(event) {
var element = Event.element(event);
if (TooltipManager.showTimer) {
clearTimeout(TooltipManager.showTimer);
TooltipManager.showTimer = null;
return;
}
if (TooltipManager.tooltipWindow)
TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
},
_tooltipOver: function(event, element) {
if (TooltipManager.hideTimer) {
clearTimeout(TooltipManager.hideTimer);
TooltipManager.hideTimer = null;
}
},
_tooltipOut: function(event, element) {
if (TooltipManager.hideTimer == null)
TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
},
_getInfo: function(element) {
// Find html_ for static content
var id = element.className.split(' ').detect(function(name) {return name.indexOf("html_") == 0});
var ajax = true;
if (id)
ajax = false;
else
// Find ajax_ for ajax content
id = element.className.split(' ').detect(function(name) {return name.indexOf("ajax_") == 0});
id = id.substr(id.indexOf('_')+1, id.length)
return id ? {ajax: ajax, id: id} : null;
},
onBeforeShow: function(eventName, win) {
var top = parseFloat(win.getLocation().top);
var dim = win.element.getDimensions();
if (top + dim.height > TooltipManager._getScrollTop() + TooltipManager._getPageHeight()) {
var position = Position.cumulativeOffset(this.element);
var top = position[1] - TooltipManager.options.shiftY - dim.height;
win.setLocation(top, position[0] + TooltipManager.options.shiftX)
}
},
_getPageWidth: function(){
return window.innerWidth || document.documentElement.clientWidth || 0;
},
_getPageHeight: function(){
return window.innerHeight || document.documentElement.clientHeight || 0;
},
_getScrollTop: function(){
return document.documentElement.scrollTop || window.pageYOffset || 0;
},
_getScrollLeft: function(){
return document.documentElement.scrollLeft || window.pageXOffset || 0;
}
};
Hosting,Redefined.1-877-WEB-8686