https://moeobrazovanie.ru/js/windows/tooltip.js

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: 'tooltip', width: 200, height: null, 
15            draggable: false, closable: 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};