Hello,
I'm trying to make different tooltips appear as the mouse moves over the various options of a select. I found a slick method for doing so in mozilla-based browsers, but IE chokes on it.
Any help for making this work in IE would be very much appreciated.
Here's the code I found: - <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.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="1">1
-
<OPTION VALUE="2">2
-
<OPTION VALUE="3">3
-
</SELECT>
-
-
</BODY>
-
Thanks in advance,
jj
11  18922 
Thank you, but unfortunately my knowledge level is not high enough that I could get this from the page you reference.
The part of the script that IE is choking on is the event argument in the onmouseover on the select itself, shown here:
<SELECT ID="aSelect"
ONMOUSEOVER="showTooltip(this, event.target.value)"
ONMOUSEOUT="hideTooltip();"
>
Apparently IE doesn't know what to do with that. Any suggestions on how I might work around that?
Thank you, again,
jj
Read from this part. For IE, you need to use event.fromElement instead of relatedTarget (which is W3C).
Hi,
event.fromElement doesn't work either for this case
any advice?
Hi,
event.fromElement doesn't work either for this case
any advice?
Post your code.
it is almost the same code as above, only i changed/add : - function showTooltip (nextTo, e) {
-
tip=(!e.target?event.srcElement.value:e.target.value)
and - ONMOUSEOVER="showTooltip(this,event)"
that removes the errors from IE, but still leaves the variable tip (under IE) undefined - <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, e) {
-
tip=(!e.target?event.srcElement.value:e.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.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)"
-
ONMOUSEOUT="hideTooltip();"
-
>
-
<OPTION VALUE="1">1
-
<OPTION VALUE="2">2
-
<OPTION VALUE="3">3
-
</SELECT>
-
-
</BODY>
that works... only not for <SELECT MULTIPLE> ... and that is the bit i want to get workin'
You mean it hides underneath the select?
no, it doesn't fill the tip variable on IE
so i get a tooltip with the text 'undefined'
See this thread.
It seems that for a multiple select, IE gives the select object. I'm not sure what its value would be. That link might help you.
Thank you for your reply, i did see this post, and under IE it gives the wrong value, the name of the selectbox that is... not the value of the <option> element
and the select alert doesn't work at all
Sign in to post your reply or Sign up for a free account.
Similar topics
by: * ProteanThread * |
last post by:
but depends upon the clique:
...
|
by: rollasoc |
last post by:
Hi,
Doing a bit of system testing on a Windows 98 laptop. (.Net 1.1 app).
Did a bit of testing. Loaded a previously saved file. A gray box
appeared with the text and buttons all white...
|
by: Jeff Rodriguez |
last post by:
Here's what I want do:
Have a main daemon which starts up several threads in a Boss-Queue structure.
From those threads, I want them all to sit and watch a queue. Once an entry
goes into the...
|
by: Scott M. |
last post by:
How can I disable the cross-site scripting check for one particular page of
a site?
|
by: Pieter |
last post by:
Hi,
I'm having some weird problem using the BackGroundWorker in an Outlook
(2003) Add-In, with VB.NET 2005:
I'm using the BackGroundWorker to get the info of some mailitems, and after
each item...
|
by: jlamanna |
last post by:
I was wondering if there was a utility that could tell you when your C#
application is making cross-apartment COM calls. I have a fairly large
application that makes extensive use of a 3rd party...
|
by: Rob Woodworth |
last post by:
Hi,
I'm having serious problems getting my report to work. I need to
generate a timesheet report which will contain info for one employee between
certain dates (one week's worth of dates). I...
|
by: Robert Bravery |
last post by:
Hi all,
Can some one show me how to achieve a cross product of arrays. So that if I
had two arrays (could be any number) with three elements in each (once again
could be any number) I would get:...
|
by: Charles |
last post by:
I'd like to develop a simple cross-platform application in C++. I'd
like it to run in Windows, OS X, PC-BSD and Linux. From my research, it
seems I should use Qt or Gtk as a graphical library. Do...
|
by: ampo |
last post by:
Hello.
Can anyone help with cross-domain problem?
I have HTML page from server1 that send xmlHTTPRequest to server2.
How can I do it?
Thanks.
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| |
