сократил страничку до следующих размеров:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script type="text/javascript">
var services = {
init: function() {
var cats = document.getElementsByTagName('h2');
for( var i=0; i<cats.length; i++ ) {
cats[i].onmouseover = services.category_overOut;
cats[i].onmouseout = services.category_overOut;
}
},
category_overOut: function( e ) {
var e = e || window.event,
tooltip = document.getElementById('tooltip'),
relatedTarget = e.relatedTarget || e.toElement;
if( tooltip.style.display == 'block' ) {
if( services._shouldHide( relatedTarget ) )
tooltip.style.display = 'none';
} else {
rememberCur( this ); // если закомментировать
// то работает нормально
tooltip.style.left = '0px';
tooltip.style.display = 'block';
tooltip.style.top = (this.offsetTop-$('tooltip').offsetHeight) + 'px';
}
function rememberCur( e ) {
services.h2 = e.tagName == 'H2' ? e : prv(e);
services.ul = e.tagName == 'UL' ? e : nxt(e);
}
},
_shouldHide: function( relatedTarget ) {
var tooltip = document.getElementById('tooltip');
return (tooltip != relatedTarget) &&
! isParent(tooltip, relatedTarget) &&
(services.h2 != relatedTarget) &&
(services.ul != relatedTarget) &&
! isParent(services.ul, relatedTarget);
}
};
function isParent( parent, el ) {
while( el ) {
if( el.parentNode == parent )
return true;
el = el.parentNode;
}
return false;
}
function nxt( n ) {
do {
n = n.nextSibling;
} while( n && n.nodeType != 1 )
return n;
}
function prv( n ) {
do {
n = n.previousSibling;
} while( n && n.nodeType != 1 )
return n;
}
function $( id ) {
return typeof id == 'string' ? document.getElementById(id) : id;
}
window.onload = services.init;
</script>
</head>
<body>
<ul><li style="line-height: 1.2;">Campaign Development
<li style="line-height: 1.2;">Mailing List Aquisition
<li style="line-height: 1.2;">Demographics
<li style="line-height: 1.2;">Bulk Rate Savings
<li style="line-height: 1.2;">Post Office Delivery
<li style="line-height: 1.2;">Database Services
<li style="line-height: 1.2;">Complete Production</ul>
<h2 style="cursor: pointer;">Political</h2>
<div id="tooltip" class="tooltip" style="
position: absolute;
display: none;
width: 450px;
background: red;
">By large color we mean large sizes, something you cannot print on a regular printing press. We can print on different kinds of media, matte paper, glossy paper, vinyl and even canvas (fabric) for whichever application you need. From a poster mounted on foam board, a simple banner with grommets or a POP display to more complex Trade Show booths or large window graphics for retail.</div>
</body>
</html>
при наведении на "Political" появляется всплывающая подсказка. При наведении на нее мыши, она не должна скрываться. Я не скрываю подсказку, если происходит mouseout c "Political" на подсказку. Но прикол в том, что в очень определенных условиях mouseout происходит на body, не на подсказку (и она исчезает). Чтобы воспроизвести ситуацию, нужно навести курсор на "Political", а потом медленно вести его вверх. При этом не получится перевести курсор на подсказку (как минимум ff3)
При чем важно количество пунктов списка (не при всех количествах пунктов ситуация воспроизводится) и то, что у них стоит line-height: 1.2. Еще важно, чтобы была вызвана функция rememberCur (хотя каким боком она влияет, я хз). Позже продолжу разбираться. Может это только у меня оно так глючит O_o
