Looks good, and I think you've got the Prototype style down pretty good,
but I'd suggest making it much more user friendly by changing the usage
in one of the following ways:
1) remove the necessary empty div and use Builder.node to create this on
the fly (better for very simple tooltips)
new ToolTip('myelement','This is my tooltip message');
2) make a div tied to an element that already has the content in it
(this is better for complex tooltips that have html markup and avoiding
having to escape quotes)
<a href="#" id="myelement">blah</a><div id="ttdiv"
style="display:none;">My <b>tooltip</b> message</div>
new ToolTip('myelement','ttdiv');
3) make the ToolTip assume the nextSibling (filtering out text nodes of
course) is the tooltip content
<a href="#" id="myelement">blah</a><div style="display:none;">My
tooltip with <span class="cool">cool</span> html</div>
new ToolTip('myelement');
4) make 1, 2 and 3 possible depending on what is passed: If no second
argument, assume 3), if $(arg2) is false then assume 1), otherwise assume 2)
Also an onload search would be nice (ToolTip.init();). Perhaps any
element with class="tooltip" it would rip the title attribute and make
it the tooltip, or even use the next sibling idea if no title is set, or
use the id wth a keyword appended (passed to init())
Rather than setting style in the div attributes, you should create the
div on the fly or use the div given, then addClassName on creation and
include a compact .css file to make the tooltips look nice.
Options I'd like to see:
{
followMouse: true/false (ala wz_tooltip)
effect: either true/flase or even some ability to choose blind,
slide, appear, false
width: 400
className: 'tooltip' (user can have different classes for different
tooltip styles)
life: 0.5 (time before it fades away after onmouseout)
}
A dispose would be good too, something that stops observers and rids any
other possible leaks (good luck on this).
I'm still using wz_tooltip.js (modified with a tt_Create(element)
function for on the fly creation) since I haven't found a single
prototype/sau based tooltip that has everything I want and is already
styled to my liking. There is probably one out there, I just haven't
found it.
Colin
[EMAIL PROTECTED] wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
