File: /home/accemeff/www/acc/js/prototype/tooltip.js
/*
* Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
*
* Permission to use, copy, modify, and distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
/* tooltip-0.2.js - Small tooltip library on top of Prototype
* by Jonathan Weiss <jw@innerewut.de> distributed under the BSD license.
*
* This tooltip library works in two modes. If it gets a valid DOM element
* or DOM id as an argument it uses this element as the tooltip. This
* element will be placed (and shown) near the mouse pointer when a trigger-
* element is moused-over.
* If it gets only a text as an argument instead of a DOM id or DOM element
* it will create a div with the classname 'tooltip' that holds the given text.
* This newly created div will be used as the tooltip. This is usefull if you
* want to use tooltip.js to create popups out of title attributes.
*
*
* Usage:
* <script src="/javascripts/prototype.js" type="text/javascript"></script>
* <script src="/javascripts/tooltip.js" type="text/javascript"></script>
* <script type="text/javascript">
* // with valid DOM id
* var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
*
* // with text
* var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
*
* // create popups for each element with a title attribute
* Event.observe(window,"load",function() {
* $$("*").findAll(function(node){
* return node.getAttribute('title');
* }).each(function(node){
* new Tooltip(node,node.title);
* node.removeAttribute("title");
* });
* });
*
* </script>
*
* Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
* be shown. On o mouseOut the tooltip disappears.
*
* Example:
*
* <script src="/javascripts/prototype.js" type="text/javascript"></script>
* <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
* <script src="/javascripts/tooltip.js" type="text/javascript"></script>
*
* <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
* Detail infos on product 1....<br />
* </div>
*
* <div id='product_1'>
* This is product 1
* </div>
*
* <script type="text/javascript">
* var my_tooltip = new Tooltip('product_1', 'tooltip')
* </script>
*
* You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
*/
var Tooltip = Class.create();
Tooltip.prototype = {
initialize: function(element, tool_tip) {
var options = Object.extend({
default_css: false,
margin: "0px",
padding: "5px",
backgroundColor: "#d6d6fc",
min_distance_x: 5,
min_distance_y: 5,
delta_x: 0,
delta_y: 0,
zindex: 1000
}, arguments[2] || {});
this.element = $(element);
this.options = options;
// use the supplied tooltip element or create our own div
if($(tool_tip)) {
this.tool_tip = $(tool_tip);
} else {
this.tool_tip = $(document.createElement("div"));
document.body.appendChild(this.tool_tip);
this.tool_tip.addClassName("tooltip");
this.tool_tip.appendChild(document.createTextNode(tool_tip));
}
// hide the tool-tip by default
this.tool_tip.hide();
this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
this.eventMouseOut = this.hideTooltip.bindAsEventListener(this);
this.eventMouseMove = this.moveTooltip.bindAsEventListener(this);
this.registerEvents();
},
destroy: function() {
Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
},
registerEvents: function() {
Event.observe(this.element, "mouseover", this.eventMouseOver);
Event.observe(this.element, "mouseout", this.eventMouseOut);
Event.observe(this.element, "mousemove", this.eventMouseMove);
},
moveTooltip: function(event){
Event.stop(event);
// get Mouse position
var mouse_x = Event.pointerX(event);
var mouse_y = Event.pointerY(event);
// decide if wee need to switch sides for the tooltip
var dimensions = Element.getDimensions( this.tool_tip );
var element_width = dimensions.width;
var element_height = dimensions.height;
if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
mouse_x = mouse_x - element_width;
// apply min_distance to make sure that the mouse is not on the tool-tip
mouse_x = mouse_x - this.options.min_distance_x;
} else {
mouse_x = mouse_x + this.options.min_distance_x;
}
if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
mouse_y = mouse_y - element_height;
// apply min_distance to make sure that the mouse is not on the tool-tip
mouse_y = mouse_y - this.options.min_distance_y;
} else {
mouse_y = mouse_y + this.options.min_distance_y;
}
// now set the right styles
this.setStyles(mouse_x, mouse_y);
},
showTooltip: function(event) {
Event.stop(event);
this.moveTooltip(event);
new Element.show(this.tool_tip);
},
setStyles: function(x, y){
// set the right styles to position the tool tip
Element.setStyle(this.tool_tip, { position:'absolute',
top:y + this.options.delta_y + "px",
left:x + this.options.delta_x + "px",
zindex:this.options.zindex
});
// apply default theme if wanted
if (this.options.default_css){
Element.setStyle(this.tool_tip, { margin:this.options.margin,
padding:this.options.padding,
backgroundColor:this.options.backgroundColor,
zindex:this.options.zindex
});
}
},
hideTooltip: function(event){
new Element.hide(this.tool_tip);
},
getWindowHeight: function(){
var innerHeight;
if (navigator.appVersion.indexOf('MSIE')>0) {
innerHeight = document.body.clientHeight;
} else {
innerHeight = window.innerHeight;
}
return innerHeight;
},
getWindowWidth: function(){
var innerWidth;
if (navigator.appVersion.indexOf('MSIE')>0) {
innerWidth = document.body.clientWidth;
} else {
innerWidth = window.innerWidth;
}
return innerWidth;
}
}