On Oct 9, 2008, at 12:34 PM, Todd wrote:
I want to use Prototype to have a tooltip fade in on an onfocus
event - to the right side of a form element - and fade out, either
when the next element is selected (or tabbed) or as a timed
fadeout, but haven’t found any useful docs specific to this that I
can make sense of on the Prototype site. I’ve looked at a lot of
variations (jQuery, CSS, overLib…) and while I can get them all
to work to an extent the end result isn’t quite what I want. I
looked at Prototip but the licensing fee is too much. Is there any
documentation that someone could point me towards?
This is not being done in FW so no actions.
First of all, so sad! This would be an easy thing with Protaculous.
Here’s the basic deal:
Load prototype.js and effects.js (from the Scriptaculous package). If
you need other effects/elements, then load the whole scriptaculous
jam, but otherwise, just use effects.js.
Make an observer for the document (to make this an unobtrusive effect):
document.observe('dom:loaded',function(){
//your functions go here
}
Now the functions. (Remember to put these inside the document
observer, so they initialize when the page loads.)
Identify the object (or class of object) you want to observe. If you
are only doing one thing, then do this:
$('your_element').observe('mouseover',function(){
$('your_tooltip').appear();
});
Now to cancel, we can’t use mouseout, because of the way that event
bubbles. So we observe mouseover on the document, but then test to
see if we have left your_element or your_tooltip.
document.observe('mousover',function(evt){
if(!$A($('your_element'),$('your_tooltip')).member(evt.element())
$('your_tooltip').fade();
});
If you want to do the same basic thing, but to a whole bunch of
objects, then you are going to want to create a system for this which
can attach all of the observers inside a loop (to save you strain on
typing and more importantly, to make this thing maintainable over time).
If your rollover targets are LIs, and your tooltips are nested DIVs,
then you could do this:
<ul>
<li class="has_tip">Thing One<div class="tooltip"
style=“display:none”>The tooltip for thing one.
$$('li.has_tip').each(function(elm){
var tip = elm.down('div');
elm.observe('mouseover',function(){
tip.appear();
});
document.observe('mouseover',function(evt){
if(!$A(elm,tip).member(evt.element())
tip.fade();
});
});
All of this is untested, please fire up Firebug if it doesn’t work
right off the bat! There may also be some issues with the forum
formatter, so I’ve Pastied it here: http://www.pastie.org/288759
Walter
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options