By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,746 Members | 1,232 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,746 IT Pros & Developers. It's quick & easy.

Cross-browser onmouseover on select.options

P: 2
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:

Expand|Select|Wrap|Line Numbers
  1.  <HEAD> 
  2. <STYLE>
  3. #tooltip {
  4. position: absolute;
  5. visibility: hidden;
  6. border: 1px solid black;
  7. background-color: lightyellow;
  8. }
  9. </STYLE>
  10. <SCRIPT>
  11. var descriptions = {
  12. '1': 'This is number 1.',
  13. '2': 'This is number 2.',
  14. '3': 'This is number 3.'
  15. }
  16. function showTooltip (nextTo, tip) {
  17. var tt = document.getElementById('tooltip');
  18. tt.innerHTML = descriptions[tip];
  19. tt.style.left = (getPageLeft(nextTo) + nextTo.offsetWidth) + 'px';
  20. tt.style.top = getPageTop(nextTo) + 'px';
  21. tt.style.visibility = 'visible';
  22. function hideTooltip () {
  23. document.getElementById('tooltip').style.visibility = 'hidden';
  24. function getPageLeft (el) {
  25. var left = 0;
  26. do 
  27. left += el.offsetLeft;
  28. while ((el = el.offsetParent));
  29. return left;
  30. }
  31. function getPageTop (el) {
  32. var top = 0;
  33. do 
  34. top += el.offsetTop;
  35. while ((el = el.offsetParent));
  36. return top;
  37. }
  38. </SCRIPT>
  39. </HEAD>
  40. <BODY>
  41. <DIV ID="tooltip"></DIV>
  42. <SELECT ID="aSelect"
  43. ONMOUSEOVER="showTooltip(this, event.target.value)"
  44. ONMOUSEOUT="hideTooltip();"
  45. >
  46. <OPTION VALUE="1">1
  47. <OPTION VALUE="2">2
  48. <OPTION VALUE="3">3
  49. </SELECT>
  50.  
  51. </BODY>
  52.  
Thanks in advance,

jj
Feb 23 '07 #1
Share this Question
Share on Google+
11 Replies

acoder
Expert Mod 15k+
P: 16,027
See this page
Feb 23 '07 #2

P: 2
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
Feb 23 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Read from this part. For IE, you need to use event.fromElement instead of relatedTarget (which is W3C).
Feb 23 '07 #4

P: 5
Hi,

event.fromElement doesn't work either for this case

any advice?
Mar 27 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Hi,

event.fromElement doesn't work either for this case

any advice?
Post your code.
Mar 27 '07 #6

P: 5
it is almost the same code as above, only i changed/add :

Expand|Select|Wrap|Line Numbers
  1. function showTooltip (nextTo, e) {
  2. tip=(!e.target?event.srcElement.value:e.target.value)
and

Expand|Select|Wrap|Line Numbers
  1. ONMOUSEOVER="showTooltip(this,event)"
that removes the errors from IE, but still leaves the variable tip (under IE) undefined

Expand|Select|Wrap|Line Numbers
  1.  <HEAD> 
  2. <STYLE>
  3. #tooltip {
  4. position: absolute;
  5. visibility: hidden;
  6. border: 1px solid black;
  7. background-color: lightyellow;
  8. }
  9. </STYLE>
  10. <SCRIPT>
  11. var descriptions = {
  12. '1': 'This is number 1.',
  13. '2': 'This is number 2.',
  14. '3': 'This is number 3.'
  15. }
  16. function showTooltip (nextTo, e) {
  17. tip=(!e.target?event.srcElement.value:e.target.value)
  18. var tt = document.getElementById('tooltip');
  19. tt.innerHTML = descriptions[tip];
  20. tt.style.left = (getPageLeft(nextTo) + nextTo.offsetWidth) + 'px';
  21. tt.style.top = getPageTop(nextTo) + 'px';
  22. tt.style.visibility = 'visible';
  23. function hideTooltip () {
  24. document.getElementById('tooltip').style.visibilit  y = 'hidden';
  25. function getPageLeft (el) {
  26. var left = 0;
  27. do 
  28. left += el.offsetLeft;
  29. while ((el = el.offsetParent));
  30. return left;
  31. }
  32. function getPageTop (el) {
  33. var top = 0;
  34. do 
  35. top += el.offsetTop;
  36. while ((el = el.offsetParent));
  37. return top;
  38. }
  39. </SCRIPT>
  40. </HEAD>
  41. <BODY>
  42. <DIV ID="tooltip"></DIV>
  43. <SELECT ID="aSelect"
  44. ONMOUSEOVER="showTooltip(this, event)"
  45. ONMOUSEOUT="hideTooltip();"
  46. >
  47. <OPTION VALUE="1">1
  48. <OPTION VALUE="2">2
  49. <OPTION VALUE="3">3
  50. </SELECT>
  51.  
  52. </BODY>
Mar 27 '07 #7

P: 5
that works... only not for <SELECT MULTIPLE> ... and that is the bit i want to get workin'
Mar 27 '07 #8

acoder
Expert Mod 15k+
P: 16,027
You mean it hides underneath the select?
Mar 28 '07 #9

P: 5
no, it doesn't fill the tip variable on IE

so i get a tooltip with the text 'undefined'
Mar 28 '07 #10

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 28 '07 #11

P: 5
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
Mar 28 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.