Entry
Can I get onmouseover events for OPTION elements in a SELECT?
Can I get onmouseover events for OPTION elements in a SELECT?
Dec 30th, 2000 10:51
Martin Honnen,
NN6 allows that. You can use that feature to display a tooltip depending
on the OPTION the mouse is over:
<HTML>
<HEAD>
<STYLE>
#tooltip {
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: lightyellow;
}
</STYLE>
<SCRIPT>
var descriptions = {
'Kibo': 'Kibo is GOD.',
'Xibo': 'Xibo is the Devil.',
'Maho': 'Maho is the JavaScript Heretic for Hire.'
}
function showTooltip (nextTo, tip) {
var tt = document.getElementById('tooltip');
tt.innerHTML = descriptions[tip];
tt.style.left = (getPageLeft(nextTo) + nextTo.offsetWidth) + 'px';
tt.style.top = getPageTop(nextTo) + 'px';
tt.style.visibility = 'visible';
}
function hideTooltip () {
document.getElementById('tooltip').style.visibility = 'hidden';
}
function getPageLeft (el) {
var left = 0;
do
left += el.offsetLeft;
while ((el = el.offsetParent));
return left;
}
function getPageTop (el) {
var top = 0;
do
top += el.offsetTop;
while ((el = el.offsetParent));
return top;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="tooltip"></DIV>
<SELECT ID="aSelect"
ONMOUSEOVER="showTooltip(this, event.target.value)"
ONMOUSEOUT="hideTooltip();"
>
<OPTION VALUE="Kibo">Kibo
<OPTION VALUE="Xibo">Xibo
<OPTION VALUE="Maho">Maho
</SELECT>
</BODY>
</HTML>
