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;