PDA

View Full Version : cross-browser onmouseover



housecat
Mar 27th, 2007, 02:08 PM
i got a tooltip script for a (multiple) select box. This currently only runs in firefox due the fact that event.target.value only is filled in FF... Any ideas how to get it runnin' under IE?


<HEAD>
<STYLE>
#tooltip {
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: lightyellow;
}
</STYLE>
<SCRIPT>
var descriptions = {
'1': 'This is number 1.',
'2': 'This is number 2.',
'3': 'This is number 3.'
}
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.visibilit y = '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="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT>

</BODY>

Mr J
Mar 27th, 2007, 03:07 PM
Try the following


Change

ONMOUSEOVER="showTooltip(this, event.target.value)"

to

ONMOUSEOVER="showTooltip(this,event)"

and add the following to the beginning of function showTooltip


function showTooltip (nextTo, e){

tip=(!e.target?event.srcElement.value:e.target.value)

housecat
Mar 27th, 2007, 03:19 PM
Hi Mr J,

thanks for your reaction!

I applied your changes, with the following results

Firefox : works
Internet Explorer : No more errors, only the i think the 'tip' var is not filled properly, because i only read 'undefined' in the tooltip

thanks for your reply!

Mr J
Mar 27th, 2007, 05:21 PM
Try this out


<HEAD>
<STYLE>
#tooltip {
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: lightyellow;
}
</STYLE>
<SCRIPT>
var descriptions = {
'1': 'This is number 1.',
'2': 'This is number 2.',
'3': 'This is number 3.'
}
function showTooltip (nextTo, tip){

tip=(!tip.target?event.srcElement.value:tip.target.value)


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)"
ONMOUSEOUT="hideTooltip();"
>
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT>

</BODY>




The only thing with IE is that the tooltip is only shown when over the top of the selectbox

housecat
Mar 27th, 2007, 05:38 PM
that works indeed ... (perhaps it worked also with your first solution, im sorry)

Only i tested (and want it to work) with
<SELECT MULTIPLE>

and then i get undefined again..

HOWEVER

when i click it and then do mouseover, it shows the description (on IE)

Firefox still works fluently onmouseover

housecat
Mar 28th, 2007, 09:48 AM
i would settle for a onclick event also.

on IE:

Only the variable tip fills after the second click, the first click you see the value from the previous click