Cross-browser onmouseover on select.options

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jjcarrell
    New Member
    • Feb 2007
    • 2
    #1

    Cross-browser onmouseover on select.options

    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:

    Code:
     <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
    Last edited by r035198x; Feb 23 '07, 05:51 AM. Reason: added code tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      See this page

        Comment

        • jjcarrell
          New Member
          • Feb 2007
          • 2
          #3
          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="sh owTooltip(this, event.target.va lue)"
          ONMOUSEOUT="hid eTooltip();"
          >


          Apparently IE doesn't know what to do with that. Any suggestions on how I might work around that?

          Thank you, again,

          jj

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Read from this part. For IE, you need to use event.fromEleme nt instead of relatedTarget (which is W3C).

                Comment

                • housecat
                  New Member
                  • Mar 2007
                  • 5
                  #5
                  Hi,

                  event.fromEleme nt doesn't work either for this case

                  any advice?

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by housecat
                      Hi,

                      event.fromEleme nt doesn't work either for this case

                      any advice?
                      Post your code.

                        Comment

                        • housecat
                          New Member
                          • Mar 2007
                          • 5
                          #7
                          it is almost the same code as above, only i changed/add :

                          Code:
                          function showTooltip (nextTo, e) {
tip=(!e.target?event.srcElement.value:e.target.value)
                          and

                          Code:
                          ONMOUSEOVER="showTooltip(this,event)"
                          that removes the errors from IE, but still leaves the variable tip (under IE) undefined

                          Code:
                           <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>

                            Comment

                            • housecat
                              New Member
                              • Mar 2007
                              • 5
                              #8
                              that works... only not for <SELECT MULTIPLE> ... and that is the bit i want to get workin'

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  You mean it hides underneath the select?

                                    Comment

                                    • housecat
                                      New Member
                                      • Mar 2007
                                      • 5
                                      #10
                                      no, it doesn't fill the tip variable on IE

                                      so i get a tooltip with the text 'undefined'

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          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.

                                            Comment

                                            • housecat
                                              New Member
                                              • Mar 2007
                                              • 5
                                              #12
                                              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

                                                Comment

                                                Previous template Next
                                                Working...