noalyss Version-9
tooltip.js
Go to the documentation of this file.
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.
4//
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
11//
12TooltipManager = {
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},
16 ajaxInfo: null,
17 elements: null,
18 showTimer: null,
19 hideTimer: null,
20
21 // Init tooltip manager
22 // parameters:
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}
34
35 init: function(cssClassName, ajaxInfo, tooltipOptions) {
36 TooltipManager.options = Object.extend(TooltipManager.options, tooltipOptions || {});
37
38 cssClassName = TooltipManager.options.cssClassName || "tooltip";
39 TooltipManager.ajaxInfo = ajaxInfo;
40 TooltipManager.elements = $$("." + cssClassName);
41 TooltipManager.elements.each(function(element) {
42 element = $(element)
43 var info = TooltipManager._getInfo(element);
44 if (info.ajax) {
45 element.ajaxId = info.id;
46 element.ajaxInfo = ajaxInfo;
47 }
48 else {
49 element.tooltipElement = $(info.id);
50 }
51 element.observe("mouseover", TooltipManager._mouseOver);
52 element.observe("mouseout", TooltipManager._mouseOut);
53 });
54 Windows.addObserver(this);
55 },
56
57 addHTML: function(element, tooltipElement) {
58 element = $(element);
59 tooltipElement = $(tooltipElement);
60 element.tooltipElement = tooltipElement;
61
62 element.observe("mouseover", TooltipManager._mouseOver);
63 element.observe("mouseout", TooltipManager._mouseOut);
64 },
65
66 addAjax: function(element, ajaxInfo) {
67 element = $(element);
68 element.ajaxInfo = ajaxInfo;
69 element.observe("mouseover", TooltipManager._mouseOver);
70 element.observe("mouseout", TooltipManager._mouseOut);
71 },
72
73 addURL: function(element, url, width, height) {
74 element = $(element);
75 element.url = url;
76 element.frameWidth = width;
77 element.frameHeight = height;
78 element.observe("mouseover", TooltipManager._mouseOver);
79 element.observe("mouseout", TooltipManager._mouseOut);
80 },
81
82 close: function() {
83 if (TooltipManager.tooltipWindow)
84 TooltipManager.tooltipWindow.hide();
85 },
86
87 preloadImages: function(path, images, extension) {
88 if (!extension)
89 extension = ".gif";
90
91 //preload images
92 $A(images).each(function(i) {
93 var image = new Image();
94 image.src= path + "/" + i + extension;
95 });
96 },
97
98 _showTooltip: function(element) {
99 if (this.element == element)
100 return;
101 // Get original element
102 while (element && (!element.tooltipElement && !element.ajaxInfo && !element.url))
103 element = element.parentNode;
104 this.element = element;
105
106 TooltipManager.showTimer = null;
107 if (TooltipManager.hideTimer)
108 clearTimeout(TooltipManager.hideTimer);
109
110 var position = Position.cumulativeOffset(element);
111 var dimension = element.getDimensions();
112
113 if (! this.tooltipWindow)
114 this.tooltipWindow = new Window("__tooltip__", TooltipManager.options);
115
116 this.tooltipWindow.hide();
117 this.tooltipWindow.setLocation(position[1] + dimension.height + TooltipManager.options.shiftY, position[0] + TooltipManager.options.shiftX);
118
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)});
121
122 // Reset width/height for computation
123 this.tooltipWindow.height = TooltipManager.options.height;
124 this.tooltipWindow.width = TooltipManager.options.width;
125
126 // Ajax content
127 if (element.ajaxInfo) {
128 var p = element.ajaxInfo.options.parameters;
129 var saveParam = p;
130
131 // Set by CSS
132 if (element.ajaxId) {
133 if (p)
134 p += "&id=" + element.ajaxId;
135 else
136 p = "id=" + element.ajaxId;
137 }
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;
142 }
143 // URL content
144 else if (element.url) {
145 this.tooltipWindow.setURL(element.url);
146 this.tooltipWindow.setSize(element.frameWidth, element.frameHeight);
147
148 // Set tooltip size
149 this.tooltipWindow.height = element.frameHeight;
150 this.tooltipWindow.width = element.frameWidth;
151 }
152 // HTML content
153 else
154 this.tooltipWindow.setHTMLContent(element.tooltipElement.innerHTML);
155
156 if (!element.ajaxInfo) {
157 this.tooltipWindow.show();
158 this.tooltipWindow.toFront();
159 }
160 },
161
162 _hideTooltip: function(element) {
163 if (this.tooltipWindow) {
164 this.tooltipWindow.hide();
165 this.element = null;
166 }
167 },
168
169 _mouseOver: function (event) {
170 var element = Event.element(event);
171 if (TooltipManager.showTimer)
172 clearTimeout(TooltipManager.showTimer);
173
174 TooltipManager.showTimer = setTimeout(function() {TooltipManager._showTooltip(element)}, TooltipManager.options.delayOver)
175 },
176
177 _mouseOut: function(event) {
178 var element = Event.element(event);
179 if (TooltipManager.showTimer) {
180 clearTimeout(TooltipManager.showTimer);
181 TooltipManager.showTimer = null;
182 return;
183 }
184 if (TooltipManager.tooltipWindow)
185 TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
186 },
187
188 _tooltipOver: function(event, element) {
189 if (TooltipManager.hideTimer) {
190 clearTimeout(TooltipManager.hideTimer);
191 TooltipManager.hideTimer = null;
192 }
193 },
194
195 _tooltipOut: function(event, element) {
196 if (TooltipManager.hideTimer == null)
197 TooltipManager.hideTimer = setTimeout(function() {TooltipManager._hideTooltip(element)}, TooltipManager.options.delayOut)
198 },
199
200 _getInfo: function(element) {
201 // Find html_ for static content
202 var id = element.className.split(' ').detect(function(name) {return name.indexOf("html_") == 0});
203 var ajax = true;
204 if (id)
205 ajax = false;
206 else
207 // Find ajax_ for ajax content
208 id = element.className.split(' ').detect(function(name) {return name.indexOf("ajax_") == 0});
209
210 id = id.substr(id.indexOf('_')+1, id.length)
211 return id ? {ajax: ajax, id: id} : null;
212 },
213
214 onBeforeShow: function(eventName, win) {
215 var top = parseFloat(win.getLocation().top);
216 var dim = win.element.getDimensions();
217
218 if (top + dim.height > TooltipManager._getScrollTop() + TooltipManager._getPageHeight()) {
219 var position = Position.cumulativeOffset(this.element);
220
221 var top = position[1] - TooltipManager.options.shiftY - dim.height;
222 win.setLocation(top, position[0] + TooltipManager.options.shiftX)
223 }
224 },
225
226 _getPageWidth: function(){
227 return window.innerWidth || document.documentElement.clientWidth || 0;
228 },
229
230 _getPageHeight: function(){
231 return window.innerHeight || document.documentElement.clientHeight || 0;
232 },
233
234 _getScrollTop: function(){
235 return document.documentElement.scrollTop || window.pageYOffset || 0;
236 },
237
238 _getScrollLeft: function(){
239 return document.documentElement.scrollLeft || window.pageXOffset || 0;
240 }
241};