/** * Prototype Based Tooltip, version 0.1.0 * Copyright (c) 2006, Nio Xiao * Licensed under The MIT License * Redistributions of files must retain the above copyright notice. * For details, see: http://nio.infor96.com/ * * Requirements: * Prototype 1.5.0_rc1. You can download it from the Prototype web site: http://prototype.conio.net/ * * Usage: * 1. Insert the following lines into section in your html file: * * * 2. Define a cool css for tooltip, for example: * * 3. Create a new Tooltip instance for your tooltip source html element: *

Move mouse over here!

* */ var Tooltip = Class.create(); Object.extend(Tooltip.prototype, { initialize: function(options) { Tooltip.Container.init(); this.setOptions(options); Element.observe(this.element, 'mouseover', this.onMouseOver.bind(this)); Element.observe(this.element, 'mouseout' , this.onMouseOut.bind(this)); }, setOptions: function(options) { var defaultOptions = { element: null, text: '', width: 200, left: 0, color: '' }; Object.extend(Object.extend(this, defaultOptions), options); }, onMouseOver: function() { Tooltip.Container.show(this); }, onMouseOut: function() { Tooltip.Container.hide(this); } }); Tooltip.Container = { id: 'tooltip', className: '', init: function() { if (!$(this.id)) { var e = document.createElement('div'); e.id = this.id; if (this.className) e.className = this.className; e.style.display = 'none'; e.style.position = 'absolute'; document.body.appendChild(e); } }, isShowing: function() { return Element.visible(this.id); }, show: function(tip) { var bodyDim = Element.getDimensions(document.body); var pos = Position.cumulativeOffset($(tip.element)); var x = pos[0], y = pos[1]; var l = tip.left; if (!l) { l = (x + tip.width > bodyDim.width - 20) ? (x - tip.width) : x; } // our $(this.id).className = tip.color; var t = $(this.id).readAttribute('title'); $(this.id).title=null; Element.setStyle(this.id, {'width': tip.width+'px', 'left': l+'px', "top": (y+20)+'px'}); // var x2 = bodyDim.width - tip.width - 10; // Element.setStyle(this.id, {'width': tip.width+'px', 'left': x2+'px', "top": (y+20)+'px'}); Element.update(this.id, tip.text); Element.show(this.id); // new Effect.Appear(this.id); }, hide: function() { Element.update(this.id, ''); Element.hide(this.id); // new Effect.Fade(this.id); } }