thr3ads.net - Rails spinoffs - ToolTip class -- need help to improve [Sep 2006]

If this information is useful, please help other people find it:
Share via:

gsarwohadi-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2006-Sep-19 16:38 UTC

ToolTip class -- need help to improve

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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Colin Mollenhour

2006-Sep-19 17:47 UTC

head link

Re: ToolTip class -- need help to improve

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

gsarwohadi-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

gsarwohadi-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org

2006-Sep-21 12:13 UTC

head link

Re: ToolTip class -- need help to improve

Hi Colin,

Thanks for the reply, and mostly for the suggestions! Im grabbing the
wz_tooltip as well to see what you mean. In the meantime, I''ll see what
I can do to this.. and I promise to keep you guys up-to-date for any
progress.. I''m still welcome if there''s a modded version from
mine
already done!

Cheers,
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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Sep 2006 - ToolTip class -- need help to improve

ToolTip class -- need help to improve

Re: ToolTip class -- need help to improve

Re: ToolTip class -- need help to improve