* codestryke gets on soap box
Ok, really, this is why I drink so heavily...
Objective:
Create an AJAX driven tooltip that can display just about anything, image, form, link etc.
At first it actually went quite well, added prototype (tried jQuery, erm, no thanks), hidden div, call to backend script to get content, change out innerHTML and show tip. Worked like a charm until I added anything like a button or a link.
Problem:
Using onMouseOut within a div that has a link / form element fires off the onMouseOut on the div! So the tooltip when I moused over the content hid the tooltip. After much research I found that this is the behavior for just about all the browsers.
The Solution:
Using events in Prototype you have to capture target and the relative target to find where it came from and where it's going. With that you can see if the container is the div -> anything and skip it and only look for div -> HTML and thus close the div (tooltip)
Event.observe('fixedtipdiv', 'mouseout',
function(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
if( reltg.nodeName == 'HTML' )
delayhidetip();
}
);
Took almost all morning to get this to work, hopefully someone else will find it useful if they ever try and accomplish the same sort of task...
