User:Greennave/tooltip.js

/* var Tooltip = Class.create; Tooltip.prototype = { initialize: function(element, tool_tip) { var options = Object.extend({     default_css: false,      margin: "0px",	  padding: "5px",	  backgroundColor: "#d6d6fc",	  delta_x: 5,	  delta_y: 5,      zindex: 1000    }, arguments[1] || {});
 * Copyright (c) 2006 Jonathan Weiss ,
 * with modifications by 
 * 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.
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

this.element     = $(element); this.tool_tip    = $(tool_tip);

this.options     = options;

// 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.eventSticky = this.makeSticky.bindAsEventListener(this); this.eventUnSticky = this.makeUnSticky.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); Event.stopObserving(this.element, "click", this.eventSticky); },

registerEvents: function { Event.observe(this.element, "mouseover", this.eventMouseOver); Event.observe(this.element, "mouseout", this.eventMouseOut); Event.observe(this.element, "mousemove", this.eventMouseMove); Event.observe(this.element, "click", this.eventSticky); },

makeSticky: function(event) { Event.stop(event); Event.stopObserving(this.element, "mouseover", this.eventMouseOver); Event.stopObserving(this.element, "mouseout", this.eventMouseOut); Event.stopObserving(this.element, "mousemove", this.eventMouseMove); Event.stopObserving(this.element, "click", this.eventSticky); Event.observe(document.getElementsByTagName("body")[0], "click", this.eventUnSticky); },

makeUnSticky: function(event){ Event.observe(this.element, "mouseover", this.eventMouseOver); Event.observe(this.element, "mouseout", this.eventMouseOut); Event.observe(this.element, "mousemove", this.eventMouseMove); Event.observe(this.element, "click", this.eventSticky); Event.stopObserving(document.getElementsByTagName("body")[0], "click", this.eventUnSticky); new Element.hide(this.tool_tip); },

showTooltip: function(event){ Event.stop(event); // Check if this is an unloaded AJAX tooltip if (this.tool_tip.hasClassName("unloadedtooltip") && this.tool_tip.hasClassName("ajaxtooltip")) { var wikicode = this.tool_tip.innerHTML.unescapeHTML; this.tool_tip.innerHTML = ''; new Ajax.Request("/api.php",               { method: 'post',                  parameters: { action: 'parse', format: 'json', text: wikicode, tool_tip: this.tool_tip.id },                  onSuccess: function (transport) {                      $(transport.request.parameters.tool_tip).innerHTML = transport.responseJSON.parse.text['*'].toString;                  }                }            ); // Flag the tooltip as loaded this.tool_tip.removeClassName("unloadedtooltip"); }

this.positionTooltip(Event.pointerX(event), Event.pointerY(event)); new Element.show(this.tool_tip); },

positionTooltip: function(mouse_x, mouse_y) { var y_offset = mouse_y; var x_offset = mouse_x;

var skin_x_offset = -210; var skin_y_offset = -55; // 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;

// position it in the standard place (below the cursor) y_offset = mouse_y + this.options.delta_y; // adjust it so it doesn't over-hang the window if ((y_offset + element_height) > (document.viewport.getHeight + document.viewport.getScrollOffsets.top)) { y_offset = mouse_y - (element_height - (document.viewport.getHeight - mouse_y)) + document.viewport.getScrollOffsets.top; // give ourselves a bit of the margin at the bottom y_offset -= this.options.delta_y * 3; }

x_offset = mouse_x + this.options.delta_x; if ((x_offset + element_width) > (document.viewport.getWidth + document.viewport.getScrollOffsets.left)) { x_offset = mouse_x - (element_width - (document.viewport.getWidth - mouse_x)) + document.viewport.getScrollOffsets.left; x_offset -= this.options.delta_x * 3; }

// if the tooltip overlaps the cursor position (!!), just shove it to the left of the cursor if (x_offset < mouse_x && (x_offset + element_width) > mouse_x &&           y_offset < mouse_y && (y_offset + element_height) > mouse_y) { x_offset = mouse_x - element_width - (this.options.delta_x * 3) + document.viewport.getScrollOffsets.left; }	// now set the right styles this.setStyles(x_offset + skin_x_offset, y_offset + skin_y_offset); }, moveTooltip: function(event) { this.positionTooltip(Event.pointerX(event), Event.pointerY(event)); }, setStyles: function(x, y){ // set the right styles to position the tool tip Element.setStyle(this.tool_tip, { position:'absolute', top:y + "px", left:x + "px", 'z-index':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, 'z-index':this.options.zindex }); }	 },

hideTooltip: function(event){ new Element.hide(this.tool_tip); },

}

var divs = document.getElementsByClassName('tooltip'); for (i = 0; i < divs.length; i++) { new Tooltip(divs[i].id, divs[i].id + '-tooltip'); }