Hello guys..
I found that there aren't any support for tooltips already, and i
thought i might contribute. Please beware that this is my first attempt
working with javascript and prototype.. so I'm sorry if any of my
approach pisses someone off.. Also, this stuff still needs a lot of
work and has much room for improvements, although its working already..
I just haven't got the chance to implement the cross-browser stuff, and
other core stuff i think is implemented in most of scriptaculos
classes/objects.
//--------------------------------------------------------------
// ToolTip Class v.0.0.1
//--------------------------------------------------------------
var ToolTip = Class.create();
ToolTip.prototype = {
initialize: function(element, update, msg) {
this.element = $(element);
this.update = $(update);
this.message = msg;
Event.observe(this.element, "mouseover",
this.onOver.bindAsEventListener(this));
Event.observe(this.element, "mouseout",
this.onOut.bindAsEventListener(this));
},
onOver: function(event) {
this.update.innerHTML = this.message;
this.update.style.position = "absolute";
this.update.style.top = (Event.pointerY(event) -
this.update.offsetHeight) + "px";
this.update.style.left = (Event.pointerX(event) + 10) + "px";
Effect.Appear(this.update,{duration:0.2});
Event.observe(this.element, "mousemove",
this.onMove.bindAsEventListener(this));
},
onMove: function(event) {
this.update.style.position = "absolute";
this.update.style.top = (Event.pointerY(event) -
this.update.offsetHeight) + "px";
this.update.style.left = (Event.pointerX(event) + 10) + "px";
this.update.innerHTML = this.message;//+"
"+this.update.offsetWidth+"
"+this.update.offsetHeight;
},
onOut: function(event) {
Effect.Fade(this.update,{duration:0.2});
Event.stopObserving(this.element, "mousemove", this.onMove);
}
}
To use, just provide an empty div like so:
<div id="tooltipbox" style="display:none;padding:5px;border:1px solid
black;background-color:white;"></div>
and create in instance below it or somewhere after the div definition:
new ToolTip("lk_858347", "tooltipbox", "Synchronize tags that are
linked together by activating this checkbox");
I see this as an opportunity for me to really get to learn javascript
and improve my coding techniques, so suggestions (or even rewritten
code) are welcome!
Best regards,
Guntur N. Sarwohadi
BallofDirt.com
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
