https://www.amortisationsrechner.de/js/tooltip.js

1/*
2 * Copyright (c) 2006 Jonathan Weiss <[email protected]>
3 *
4 * Permission to use, copy, modify, and distribute this software for any
5 * purpose with or without fee is hereby granted, provided that the above
6 * copyright notice and this permission notice appear in all copies.
7 *
8 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
9 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
10 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
11 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
12 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
13 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
14 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
15 */
16
17
18/* tooltip-0.2.js - Small tooltip library on top of Prototype 
19 * by Jonathan Weiss <[email protected]> distributed under the BSD license. 
20 *
21 * This tooltip library works in two modes. If it gets a valid DOM element 
22 * or DOM id as an argument it uses this element as the tooltip. This 
23 * element will be placed (and shown) near the mouse pointer when a trigger-
24 * element is moused-over.
25 * If it gets only a text as an argument instead of a DOM id or DOM element
26 * it will create a div with the classname 'tooltip' that holds the given text.
27 * This newly created div will be used as the tooltip. This is usefull if you 
28 * want to use tooltip.js to create popups out of title attributes.
29 * 
30 *
31 * Usage: 
32 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
33 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
34 *   <script type="text/javascript">
35 *     // with valid DOM id
36 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
37 *
38 *     // with text
39 *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
40 *
41 *     // create popups for each element with a title attribute
42 *    Event.observe(window,"load",function() {
43 *      $$("*").findAll(function(node){
44 *        return node.getAttribute('title');
45 *      }).each(function(node){
46 *        new Tooltip(node,node.title);
47 *        node.removeAttribute("title");
48 *      });
49 *    });
50 *    
51 *   </script>
52 * 
53 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
54 * be shown. On o mouseOut the tooltip disappears. 
55 * 
56 * Example:
57 * 
58 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
59 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
60 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
61 *
62 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
63 *     Detail infos on product 1....<br />
64 *   </div>
65 *
66 *   <div id='product_1'>
67 *     This is product 1
68 *   </div>
69 *
70 *   <script type="text/javascript">
71 *     var my_tooltip = new Tooltip('product_1', 'tooltip')
72 *   </script>
73 *
74 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
75 */
76
77var Tooltip = Class.create();
78Tooltip.prototype = {
79  initialize: function(element, tool_tip) {
80    var options = Object.extend({
81      default_css: false,
82      margin: "0px",
83	    padding: "5px",
84	    backgroundColor: "#d6d6fc",
85	    min_distance_x: 5,
86      min_distance_y: 5,
87      delta_x: 0,
88      delta_y: 0,
89      zindex: 1000
90    }, arguments[2] || {});
91
92    this.element      = $(element);
93    this.options      = options;
94    // use the supplied tooltip element or create our own div
95    if($(tool_tip)) {
96      this.tool_tip = $(tool_tip);
97    } else {
98      this.tool_tip = $(document.createElement("div")); 
99      document.body.appendChild(this.tool_tip);
100      this.tool_tip.addClassName("tooltip");
101      var testarray;
102      testarray=tool_tip.split(/<br>/);
103
104      for (i=0;i<testarray.length;i++) {
105      		this.tool_tip.appendChild(document.createTextNode(testarray[i]));
106      		this.tool_tip.appendChild(document.createElement("br"));
107      }
108      	
109    }
110
111    // hide the tool-tip by default
112    this.tool_tip.hide();
113
114    this.eventMouseOver  = this.showTooltip.bindAsEventListener(this);
115    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
116    this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);
117
118    this.registerEvents();
119  },
120
121  destroy: function() {
122    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
123    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
124    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
125  },
126
127  registerEvents: function() {
128    Event.observe(this.element, "mouseover", this.eventMouseOver);
129    Event.observe(this.element, "mouseout", this.eventMouseOut);
130    Event.observe(this.element, "mousemove", this.eventMouseMove);
131  },
132
133  moveTooltip: function(event){
134	  Event.stop(event);
135	  // get Mouse position
136    var mouse_x = Event.pointerX(event);
137	  var mouse_y = Event.pointerY(event);
138	
139	  // decide if wee need to switch sides for the tooltip
140	  var dimensions = Element.getDimensions( this.tool_tip );
141	  var element_width = dimensions.width;
142	  var element_height = dimensions.height;
143	
144	  if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
145		  mouse_x = mouse_x - element_width;
146		  // apply min_distance to make sure that the mouse is not on the tool-tip
147		  mouse_x = mouse_x - this.options.min_distance_x;
148	  } else {
149		  mouse_x = mouse_x + this.options.min_distance_x;
150	  }
151	
152	  if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
153		  mouse_y = mouse_y - element_height;
154	    // apply min_distance to make sure that the mouse is not on the tool-tip
155		  mouse_y = mouse_y - this.options.min_distance_y;
156	  } else {
157		  mouse_y = mouse_y + this.options.min_distance_y;
158	  } 
159	
160	  // now set the right styles
161	  this.setStyles(mouse_x, mouse_y);
162  },
163	
164		
165  showTooltip: function(event) {
166    Event.stop(event);
167    this.moveTooltip(event);
168	  new Element.show(this.tool_tip);
169  },
170  

171  setStyles: function(x, y){
172    // set the right styles to position the tool tip
173	  Element.setStyle(this.tool_tip, { position:'absolute',
174	 								    top:y + this.options.delta_y + "px",
175	 								    left:x + this.options.delta_x + "px",
176									    zindex:this.options.zindex
177	 								  });
178	
179	  // apply default theme if wanted
180	  if (this.options.default_css){
181	  	  Element.setStyle(this.tool_tip, { margin:this.options.margin,
182		 		  						                    padding:this.options.padding,
183		                                      backgroundColor:this.options.backgroundColor,
184										                      zindex:this.options.zindex
185		 								    });	
186	  }	
187  },
188
189  hideTooltip: function(event){
190	  new Element.hide(this.tool_tip);
191  },
192
193  getWindowHeight: function(){
194    var innerHeight;
195	  if (navigator.appVersion.indexOf('MSIE')>0) {
196		  innerHeight = document.body.clientHeight;
197    } else {
198		  innerHeight = window.innerHeight;
199    }
200    return innerHeight;	
201  },
202 
203  getWindowWidth: function(){
204    var innerWidth;
205	  if (navigator.appVersion.indexOf('MSIE')>0) {
206		  innerWidth = document.body.clientWidth;
207    } else {
208		  innerWidth = window.innerWidth;
209    }
210    return innerWidth;	
211  }
212
213}