I would look at the observe in a different way ...

by that i mean observe the element that you are hovering not the whole 
window .... this way the event will bubble up the DOM and can be stopped as 
bubbling goes up the document not down.. this is a quick and dirty tooltips 
script i wrote a few weeks ago which does the same thing you are trying to 

 tooltips : function() {
  $$(tooltipClass+' div').invoke('observe', 'mouseover', function(event) 
  $$(tooltipClass+' img').invoke('observe', 'mouseover', function(event) 
    $$(tooltipClass).invoke('observe', 'mouseover', function(event) {
    if($$(invokedTooltipClass).length >= 1) {

    var text=$(this).down(0).innerHTML;
    if(text=='') {
   var width=(text.length*10)+'px';

   var x=Event.pointerX(event)-30;// horizontal (Left to Right)
   var y=Event.pointerY(event)+20; // vertical (Top to Bototm)

   var el = new Element('div', { 'class': 'tt','style' : 
 }).update('<div style="float:right;width:22px;margin-left:6px;"><img 
src="/resources/includes/images/help.png" /></div>'+text);
    var att=this;

   $$(tooltipClass).invoke('observe', 'mouseout', function(event) {
    $$('.tt').each(function(elem) {

basically what it does is has an element with a classname in this case 
".tooltip" ... inside the element is has a hidden span containing html

<div class="tooltip"><span style="display:none;">The HTML i want to 
display</span>This is my tooltip Element ... Hover me to see the tip</div>

The first couple of lines stop the event bubbliing to the html i put into it 
(just an image and a div in this case) .. you can see how its not bubbled up 
the DOM and its all pretty self explanitory .. you can see the mouse out 
function too (that removes the created tip when its lost its hover) ..

hope this helps a bit into understanding how things like this can be 


----- Original Message ----- 
From: "Calvin L" <cal...@gmail.com>
To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com>
Sent: Wednesday, December 17, 2008 2:42 AM
Subject: [Proto-Scripty] Using Event.observe and checking for childNodes in 
a parent

> Hi everyone,
> I've been baffled on day on how to get this done. I'm fairly new to
> Javascript and Prototype, so excuse me if I sound stupid!
> I have an element, that, when hovered over, displays an absolutely
> positioned div. This div has a bunch of other elements inside it,
> because it displays a lot of information. I'm trying to use
> Event.observe to tell prototype when to close the "popup" div. I only
> want it to show when hovered over, and disappear when the mouse moves
> outside of the popup. Here's my code:
> Event.observe(window, 'mouseover', function(event){
> var elem = Event.element(event);
> if(elem.id != prodElem){
> $(prodElem).hide();
> event.stop();
> }
> });
> where prodElem is the id of "popup" div. The problem is, when I hover
> over the other elements inside prodElem, it will hide the popup. There
> are a zillion elements in there and I don't want to have to list out
> all the elements. Is there some way to check for all childNodes within
> a parent node?
> Thanks for any help!
> Calvin
> >

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 
For more options, visit this group at 

Reply via email to