1// Singleton class TooltipWindow
2// This class works with special className. The tooltip content could be in your HTML page as an hidden element or
3// can be retreive by an AJAX call.
5// To work, You just need to set two class name on elements that should show tooltips
6// - One to say to TooltipManager that this element must have a tooltip ('tooltip' by default)
7// - Another to indicate how to find the tooltip content
8// It could be html_XXXX if tootltip content is somewhere hidden in your page, XXX must be DOM ID of this hidden element
9// 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.
10// Check samples/tooltips/tooltip.html to see how it works
13 options: {cssClassName: 'tooltip', delayOver: 200, delayOut: 1000, shiftX: 10, shiftY: 10,
14 className: 'alphacube', width: 200, height: null,
15 draggable: false, minimizable: false, maximizable: false, showEffect: Element.show, hideEffect: Element.hide},
21 // Init tooltip manager
23 // - cssClassName (string) : CSS class name where tooltip should be shown.
24 // - ajaxOptions (hash) : Ajax options for ajax tooltip.
25 // For examples {url: "/tooltip/get.php", options: {method: 'get'}}
26 // see Ajax.Request documentation for details
27 //- tooltipOptions (hash) : available keys
28 // - delayOver: int in ms (default 10) delay before showing tooltip
29 // - delayOut: int in ms (default 1000) delay before hidding tooltip
30 // - shiftX: int in pixels (default 10) left shift of the tooltip window
31 // - shiftY: int in pixels (default 10) top shift of the tooltip window
32 // and All window options like showEffect: Element.show, hideEffect: Element.hide to remove animation
33 // default: {className: 'alphacube', width: 200, height: null, draggable: false, minimizable: false, maximizable: false}
35 init: function(cssClassName, ajaxInfo, tooltipOptions) {
36 TooltipManager.options = Object.extend(TooltipManager.options, tooltipOptions || {});
38 cssClassName = TooltipManager.options.cssClassName || "tooltip";
39 TooltipManager.ajaxInfo = ajaxInfo;
40 TooltipManager.elements = $$("." + cssClassName);
41 TooltipManager.elements.each(function(element) {
43 var info = TooltipManager._getInfo(element);
45 element.ajaxId = info.id;
46 element.ajaxInfo = ajaxInfo;
49 element.tooltipElement = $(info.id);
51 element.observe("mouseover", TooltipManager._mouseOver);
52 element.observe("mouseout", TooltipManager._mouseOut);
54 Windows.addObserver(this);
57 addHTML: function(element, tooltipElement) {
59 tooltipElement = $(tooltipElement);
60 element.tooltipElement = tooltipElement;
62 element.observe("mouseover", TooltipManager._mouseOver);
63 element.observe("mouseout", TooltipManager._mouseOut);
66 addAjax: function(element, ajaxInfo) {
68 element.ajaxInfo = ajaxInfo;
69 element.observe("mouseover", TooltipManager._mouseOver);
70 element.observe("mouseout", TooltipManager._mouseOut);
73 addURL: function(element, url, width, height) {
76 element.frameWidth = width;
77 element.frameHeight = height;
78 element.observe("mouseover", TooltipManager._mouseOver);
79 element.observe("mouseout", TooltipManager._mouseOut);
83 if (TooltipManager.tooltipWindow)
84 TooltipManager.tooltipWindow.hide();
87 preloadImages: function(path, images, extension) {
92 $A(images).each(function(i) {
93 var image = new Image();
94 image.src= path + "/" + i + extension;
98 _showTooltip: function(element) {
99 if (this.element == element)
101 // Get original element
102 while (element && (!element.tooltipElement && !element.ajaxInfo && !element.url))
103 element = element.parentNode;
104 this.element = element;
106 TooltipManager.showTimer = null;
107 if (TooltipManager.hideTimer)
108 clearTimeout(TooltipManager.hideTimer);
110 var position = Position.cumulativeOffset(element);
111 var dimension = element.getDimensions();
113 if (! this.tooltipWindow)
114 this.tooltipWindow = new Window("__tooltip__", TooltipManager.options);
116 this.tooltipWindow.hide();
117 this.tooltipWindow.setLocation(position[1] + dimension.height + TooltipManager.options.shiftY, position[0] + TooltipManager.options.shiftX);
119 Event.observe(this.tooltipWindow.element, "mouseover", function(event) {TooltipManager._tooltipOver(event, element)});
120 Event.observe(this.tooltipWindow.element, "mouseout", function(event) {TooltipManager._tooltipOut(event, element)});
122 // Reset width/height for computation
123 this.tooltipWindow.height = TooltipManager.options.height;
124 this.tooltipWindow.width = TooltipManager.options.width;
127 if (element.ajaxInfo) {
128 var p = element.ajaxInfo.options.parameters;
132 if (element.ajaxId) {
134 p += "&id=" + element.ajaxId;
136 p = "id=" + element.ajaxId;
138 element.ajaxInfo.options.parameters = p || "";
139 this.tooltipWindow.setHTMLContent("");
140 this.tooltipWindow.setAjaxContent(element.ajaxInfo.url, element.ajaxInfo.options);
141 element.ajaxInfo.options.parameters = saveParam;
144 else if (element.url) {
145 this.tooltipWindow.setURL(element.url);
146 this.tooltipWindow.setSize(element.frameWidth, element.frameHeight);
149 this.tooltipWindow.height = element.frameHeight;
150 this.tooltipWindow.width = element.frameWidth;
154 this.tooltipWindow.setHTMLContent(element.tooltipElement.innerHTML);
156 if (!element.ajaxInfo) {
157 this.tooltipWindow.show();
158 this.tooltipWindow.toFront();
162 _hideTooltip: function(element) {
163 if (this.tooltipWindow) {
164 this.tooltipWindow.hide();
169 _mouseOver: function (event) {
170 var element = Event.element(event);
171 if (TooltipManager.showTimer)
172 clearTimeout(TooltipManager.showTimer);
174 TooltipManager.showTimer = setTimeout(function() {TooltipManager._showTooltip(element)}, TooltipManager.options.delayOver)
177 _mouseOut: function(event) {
178 var element = Event.element(event);
179 if (TooltipManager.showTimer) {
180 clearTimeout(TooltipManager.showTimer);
181 TooltipManager.showTimer = null;
184 if (TooltipManager.tooltipWindow)
185 TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
188 _tooltipOver: function(event, element) {
189 if (TooltipManager.hideTimer) {
190 clearTimeout(TooltipManager.hideTimer);
191 TooltipManager.hideTimer = null;
195 _tooltipOut: function(event, element) {
196 if (TooltipManager.hideTimer == null)
197 TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
200 _getInfo: function(element) {
201 // Find html_ for static content
202 var id = element.className.split(' ').detect(function(name) {return name.indexOf("html_") == 0});
207 // Find ajax_ for ajax content
208 id = element.className.split(' ').detect(function(name) {return name.indexOf("ajax_") == 0});
210 id = id.substr(id.indexOf('_')+1, id.length)
211 return id ? {ajax: ajax, id: id} : null;
214 onBeforeShow: function(eventName, win) {
215 var top = parseFloat(win.getLocation().top);
216 var dim = win.element.getDimensions();
218 if (top + dim.height > TooltipManager._getScrollTop() + TooltipManager._getPageHeight()) {
219 var position = Position.cumulativeOffset(this.element);
221 var top = position[1] - TooltipManager.options.shiftY - dim.height;
222 win.setLocation(top, position[0] + TooltipManager.options.shiftX)
226 _getPageWidth: function(){
227 return window.innerWidth || document.documentElement.clientWidth || 0;
230 _getPageHeight: function(){
231 return window.innerHeight || document.documentElement.clientHeight || 0;
234 _getScrollTop: function(){
235 return document.documentElement.scrollTop || window.pageYOffset || 0;
238 _getScrollLeft: function(){
239 return document.documentElement.scrollLeft || window.pageXOffset || 0;