Hi Kupido, This is a good way to do this. Just a suggestion, if the tooltip appear, let it des-appear sloowly too. so don't just hide() it, but do an effect to do this :))
-- david On 30 oct, 12:58, Kupido <kup...@hotmail.com> wrote: > I think I solved the problem using effect queues, this is the new > code: > > function init() > { > var boxes = $('boxes'); > > boxes.select('.box').each( > function (box) > { > var tooltip = box.down('.tooltip'); > > Event.observe(box, 'mouseenter', > mouseEnter.bindAsEventListener > (box, tooltip)); > Event.observe(box, 'mouseleave', > mouseLeave.bindAsEventListener > (box, tooltip)); > } > ); > > function mouseEnter(event, tooltip) > { > if (!tooltip.visible()) > { > tooltip.setStyle({ > top: (this.positionedOffset().top + > this.getHeight() - 20) + 'px', > left: (this.positionedOffset().left + > parseInt(this.getWidth() / > 2)) + 'px' > }); > tooltip.appear({ duration: 0.2, to: 0.8, queue: { > position: 'end', > scope: 'boxes-scope', limit: 1 }}); > } > } > > function mouseLeave(event, tooltip) > { > Effect.Queues.get('boxes-scope').invoke('cancel'); > > tooltip.hide(); > } > > } > > document.observe('dom:loaded', function () { init(); }); > > Comments and suggestions are welcome! > > On Oct 30, 12:18 pm, Kupido <kup...@hotmail.com> wrote: > > > After some testing I noticed the problem only occurs when I use: > > > tooltip.appear(); // scriptaculous effect > > > instead of: > > > tooltip.show(); > > > Any suggestions? > > > On Oct 30, 11:37 am, Kupido <kup...@hotmail.com> wrote: > > > > Hi david, thank you for your reply. > > > > The element argument in my previous post was a copy/paste error, > > > here's a simplified working version of my code: > > > > function init() > > > { > > > var boxes = $('boxes'); > > > > boxes.select('.box').each( > > > function (box) > > > { > > > Event.observe(box, 'mouseenter', > > > mouseEnter.bindAsEventListener > > > (box, box.down('.tooltip'))); > > > Event.observe(box, 'mouseleave', > > > mouseLeave.bindAsEventListener > > > (boxes)); > > > } > > > ); > > > > function mouseEnter(event, tooltip) > > > { > > > if (!tooltip.visible()) > > > { > > > tooltip.setStyle({ > > > top: (this.positionedOffset().top + > > > this.getHeight() + 10) + 'px', > > > left: (this.positionedOffset().left) + > > > 'px' > > > }); > > > tooltip.show(); > > > } > > > } > > > > function mouseLeave(event) > > > { > > > this.select('.tooltip').invoke('hide'); > > > } > > > > } > > > > document.observe('dom:loaded', function () { init(); }); > > > > On Oct 30, 11:03 am, david <david.brill...@gmail.com> wrote: > > > > > Hi Kupido, > > > > > When writting: > > > > Event.observe(element, 'mouseenter', mouseEnter.bindAsEventListener > > > > (element)); > > > > > When writting "bindAsEventListener", it means that your binded > > > > function will have its scope set to element. > > > > So your called fiunction should be: > > > > function mouseEnter(event) > > > > { > > > > this.setStyle('color:blue'); //just an exemple of a call to an > > > > element method. > > > > > } > > > > > In your writting, there is an element argument. If you use it, I'm not > > > > sure it works. > > > > > Btw, if you can post your whole code, it could help us. > > > > > -- > > > > david > > > > > On 30 oct, 10:51, Kupido <kup...@hotmail.com> wrote: > > > > > > Hi all, > > > > > I have a page with some boxes placed side by side. When the user moves > > > > > over one of them a tooltip appears, then it should disappear when the > > > > > user moves out or moves over another box. > > > > > > I use the mouseenter and mouseleave events to do this but sometimes, > > > > > when the user moves quickly on the boxes, some tooltips don't hide. I > > > > > can see even more than one tooltip at the same time and they won't > > > > > disappear until the boxes are hovered again. It's like the mouseleave > > > > > event is not triggered, but if I put an alert in it I see it gets > > > > > triggered. > > > > > > The code is the following: > > > > > > $('boxes').select('.box').each( > > > > > function (element) > > > > > { > > > > > Event.observe(element, 'mouseenter', > > > > > mouseEnter.bindAsEventListener > > > > > (element)); > > > > > Event.observe(element, 'mouseleave', > > > > > mouseLeave.bindAsEventListener > > > > > (element)); > > > > > } > > > > > ); > > > > > > function mouseEnter(event, element) > > > > > { > > > > > ... > > > > > > } > > > > > > function mouseLeave(event, element) > > > > > { > > > > > ... > > > > > > } > > > > > > What am I doing wrong? Any help would be appreciated, thanks in > > > > > advance. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---