none
How to display tooltip for Select control in HTML? RRS feed

  • Question

  •  

    I want to display tooltip for a dropdown list.

     

    <select>

    <option value="1">A</option>

    <option value="2">B</option>

    <option value="3">C</option>

    </select>

     

    I tried with event.srcElement.value but that always return "undefined".

     

    Any advice?

     

    Monday, March 3, 2008 1:30 PM

Answers

  • AFAIK, there is no solution to this for IE6.

    the title attribute doesn't work on the option or the select tag... and events can not be attached to option elements in IE (any version).

    The closest you are going to get is something like this...

    (Note, it only works with select elements with a size specified equal to the number of options, and the tooltip will have to reside outside the select element somewhere because it can't float over the select in IE6.)

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>IE6 Hack to enable tooltips on select elements</title>
    <script>
        function showIE6Tooltip(e){
            if(!e){var e = window.event;}
            var obj = e.srcElement;
            var objHeight = obj.offsetHeight;
            var optionCount = obj.options.length;
            var eX = e.offsetX;
            var eY = e.offsetY;

            //vertical position within select will roughly give the moused over option...
            var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount));

            var tooltip = document.getElementById('ie6SelectTooltip');
            tooltip.innerHTML = obj.options[hoverOptionIndex].title;
            tooltip.style.display = 'block';
        }
        function hideIE6Tooltip(e){
            var tooltip = document.getElementById('ie6SelectTooltip');
            tooltip.innerHTML = '';
            tooltip.style.display = 'none';
        }
    </script>
    </head>
    <body>
        <select id="test" title="Title on the select" onmousemove="showIE6Tooltip();" onmouseout="hideIE6Tooltip();" size="8">
            <option value="1" title="This is the number 1 option, with a really long title based tooltip">One Thing</option>
            <option value="2" title="This is the number 2 option, with a really long title based tooltip">Two Thing</option>
            <option value="3" title="This is the number 3 option, with a really long title based tooltip">Three Thing</option>
            <option value="4" title="This is the number 4 option, with a really long title based tooltip">Four Thing</option>
            <option value="5" title="This is the number 5 option, with a really long title based tooltip">Five Thing</option>
            <option value="6" title="This is the number 6 option, with a really long title based tooltip">Six Thing</option>
            <option value="7" title="This is the number 7 option, with a really long title based tooltip">Seven Thing</option>
            <option value="8" title="This is the number 8 option, with a really long title based tooltip">Eight Thing</option>
        </select>
        <div id="ie6SelectTooltip" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;"></div>
    </body>
    </html>



    One thing to note, is that the above example is full of IE only code, and should only be served up to IE6 users as a workaround to the IE bugs.

    And again, it is very much a hack.
    Thursday, July 3, 2008 5:44 PM

All replies

  • Just add the "title" attribute to your options.  This will provide a tooltip in all browsers.


    Code Snippet

    <select>

    <option value="1" title="Cheese">A</option>

    <option value="2" title="Mango Chutney">B</option>

    <option value="3" title="Key Lime Pie">C</option>

    </select>




    Monday, March 3, 2008 4:02 PM
  • Give it a try!.

    Wish it was so simple.

     

    DDL has that title tag but "unfortunately" it does not work.

     

    Anyways I forgot to add that Size attribute in my snippet.

    <select size="3">

    <option value="1" title="Cheese">A</option>

    <option value="2" title="Mango Chutney">B</option>

    <option value="3" title="Key Lime Pie">C</option>

    </select>

     

    Thanks for your efforts.

    Tuesday, March 4, 2008 6:34 AM
  • that works for firefox, but not ie6.

    Monday, June 16, 2008 8:36 PM
  • doesn't work in IE6, what a shocker!....

    I was about to suggest using an onmouseover="" for the option(s) in IE6... then I remembered that options in IE have no event handling.

    IE bug #280

    http://webbugtrack.blogspot.com/2007/11/bug-280-lack-of-events-for-options.html


    I guess for IE6 you'll have to come up with some other kind of hack.  then again, if you can hold out a little longer, you won't need to support IE6 anymore!
    Monday, June 16, 2008 9:23 PM
  • well I'm still w8ing.

    but now I hv tld businezz 2 mk change in SRS.

     

    bt juz wondering .. i maynot b d 1st person 2 find sol. 4 dis prb....

    Wednesday, July 2, 2008 11:10 AM
  • AFAIK, there is no solution to this for IE6.

    the title attribute doesn't work on the option or the select tag... and events can not be attached to option elements in IE (any version).

    The closest you are going to get is something like this...

    (Note, it only works with select elements with a size specified equal to the number of options, and the tooltip will have to reside outside the select element somewhere because it can't float over the select in IE6.)

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>IE6 Hack to enable tooltips on select elements</title>
    <script>
        function showIE6Tooltip(e){
            if(!e){var e = window.event;}
            var obj = e.srcElement;
            var objHeight = obj.offsetHeight;
            var optionCount = obj.options.length;
            var eX = e.offsetX;
            var eY = e.offsetY;

            //vertical position within select will roughly give the moused over option...
            var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount));

            var tooltip = document.getElementById('ie6SelectTooltip');
            tooltip.innerHTML = obj.options[hoverOptionIndex].title;
            tooltip.style.display = 'block';
        }
        function hideIE6Tooltip(e){
            var tooltip = document.getElementById('ie6SelectTooltip');
            tooltip.innerHTML = '';
            tooltip.style.display = 'none';
        }
    </script>
    </head>
    <body>
        <select id="test" title="Title on the select" onmousemove="showIE6Tooltip();" onmouseout="hideIE6Tooltip();" size="8">
            <option value="1" title="This is the number 1 option, with a really long title based tooltip">One Thing</option>
            <option value="2" title="This is the number 2 option, with a really long title based tooltip">Two Thing</option>
            <option value="3" title="This is the number 3 option, with a really long title based tooltip">Three Thing</option>
            <option value="4" title="This is the number 4 option, with a really long title based tooltip">Four Thing</option>
            <option value="5" title="This is the number 5 option, with a really long title based tooltip">Five Thing</option>
            <option value="6" title="This is the number 6 option, with a really long title based tooltip">Six Thing</option>
            <option value="7" title="This is the number 7 option, with a really long title based tooltip">Seven Thing</option>
            <option value="8" title="This is the number 8 option, with a really long title based tooltip">Eight Thing</option>
        </select>
        <div id="ie6SelectTooltip" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;"></div>
    </body>
    </html>



    One thing to note, is that the above example is full of IE only code, and should only be served up to IE6 users as a workaround to the IE bugs.

    And again, it is very much a hack.
    Thursday, July 3, 2008 5:44 PM
  • juz awesome..

    now dis is wht I call real HTML n JS brainyy!!!

    thanks 4 d solution Smile evven dis of gr8 help Smile thanks again Smile

    Wednesday, July 23, 2008 6:40 PM
  • To take that solution further..

    1. tooltip over selected item.

     

    Code Snippet

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>IE6 Hack to enable tooltips on select elements</title>
    <script>
        function showIE6Tooltip(e){
            if(!e){var e = window.event;}
            var obj = e.srcElement;
            var objHeight = obj.offsetHeight;
            var optionCount = obj.options.length;
            var eX = e.offsetX;
            var eY = e.offsetY;

            //vertical position within select will roughly give the moused over option...
            var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount));

            var tooltip = document.getElementById('dvDiv');
            tooltip.innerHTML = obj.options[hoverOptionIndex].title;

     mouseX=e.pageX?e.pageX:e.clientX;
            mouseY=e.pageY?e.pageY:e.clientY;
     
            tooltip.style.left=mouseX+10;
            tooltip.style.top=mouseY;

     tooltip.style.display = 'block';

     var frm = document.getElementById("frm");
     frm.style.left = tooltip.style.left;
     frm.style.top = tooltip.style.top;
     frm.style.height = tooltip.offsetHeight;
     frm.style.width = tooltip.offsetWidth;
     frm.style.display = "block";
        }
        function hideIE6Tooltip(e){
            var tooltip = document.getElementById('dvDiv');
            var iFrm = document.getElementById('frm');
            tooltip.innerHTML = '';
            tooltip.style.display = 'none';
            iFrm.style.display = 'none';
        }
    </script>
    </head>
    <body>
        <select id="test" title="Title on the select" onmousemove="showIE6Tooltip();" onmouseout="hideIE6Tooltip();" size="8">
            <option value="1" title="This is the number 1 option, with a really long title based tooltip">One Thing</option>
            <option value="2" title="This is the number 2 option, with a really long title based tooltip">Two Thing</option>
            <option value="3" title="This is the number 3 option, with a really long title based tooltip">Three Thing</option>
            <option value="4" title="This is the number 4 option, with a really long title based tooltip">Four Thing</option>
            <option value="5" title="This is the number 5 option, with a really long title based tooltip">Five Thing</option>
            <option value="6" title="This is the number 6 option, with a really long title based tooltip">Six Thing</option>
            <option value="7" title="This is the number 7 option, with a really long title based tooltip">Seven Thing</option>
            <option value="8" title="This is the number 8 option, with a really long title based tooltip">Eight Thing</option>
        </select>

        <div id="dvDiv" style="display:none;position:absolute;padding:1px;border:1px solid

    #333333;;background-color:#fffedf;font-size:smaller;z-index:999;"></div>
    <iframe id="frm" style="display:none;position:absolute;z-index:998"></iframe>
    </body>
    </html>

     

     

     

    hope this helps..if u r nt working IE7 Smile

     

     

    Wednesday, July 23, 2008 8:13 PM
  • 1) If count of items in list less then 'possible selected item' - crash Smile Need check to prevent

    2) It is better to use max number of entries instead of number of entries (optionCount) to calculate, because solution will not work for half-empty list

    3) typeof(document.body.style.maxHeight) will be equal to 'undefined' for IE6, but for other browsers it will not be undefined. That can be used as checking if browser is IE6.

    4) Sometimes 'title' can be empty, or offsetX can be -1, need checks..

     

    Here's my code:

     

    Code Snippet

        function showIE6Tooltip(maxOptionCount, e){
          if (typeof(document.body.style.maxHeight) != 'undefined') {
            return;
          }
            if(!e){var e = window.event;}
            var obj = e.srcElement;
            var objHeight = obj.offsetHeight;
            var optionCount = obj.options.length;
            var eX = e.offsetX;
            var eY = e.offsetY;

            //vertical position within select will roughly give the moused over option...
            var hoverOptionIndex = Math.floor(eY / (objHeight / maxOptionCount));

      if(hoverOptionIndex >= 0 && hoverOptionIndex < obj.options.length && obj.options[hoverOptionIndex].title.length != 0) {
           
              var tooltip = document.getElementById('dvDiv');
              tooltip.innerHTML = obj.options[hoverOptionIndex].title;
             

        mouseX=e.pageX?e.pageX:e.clientX;
        mouseY=e.pageY?e.pageY:e.clientY;
      
        tooltip.style.left=mouseX+10;
        tooltip.style.top=mouseY;
     
        tooltip.style.display = 'block';
       
        var frm = document.getElementById('frm');
        frm.style.left = tooltip.style.left;
        frm.style.top = tooltip.style.top;
        frm.style.height = tooltip.offsetHeight;
        frm.style.width = tooltip.offsetWidth;
        frm.style.display = 'block';
      } else {
        hideIE6Tooltip(e);
      }
        }

     

     

    P.S. VERY BIG THANKS for this nice solution!

     

     

     

    Monday, September 1, 2008 9:35 AM
  • 1) If count of items in list less then 'possible selected item' - crash Smile Need check to prevent

    2) It is better to use max number of entries instead of number of entries (optionCount) to calculate, because solution will not work for half-empty list

    3) typeof(document.body.style.maxHeight) will be equal to 'undefined' for IE6, but for other browsers it will not be undefined. That can be used as checking if browser is IE6.

    4) Sometimes 'title' can be empty, or offsetX can be -1, need checks..

     

    Here's my code:

     

    Code Snippet

        function showIE6Tooltip(maxOptionCount, e){
          if (typeof(document.body.style.maxHeight) != 'undefined') {
            return;
          }
            if(!e){var e = window.event;}
            var obj = e.srcElement;
            var objHeight = obj.offsetHeight;
            var optionCount = obj.options.length;
            var eX = e.offsetX;
            var eY = e.offsetY;

            //vertical position within select will roughly give the moused over option...
            var hoverOptionIndex = Math.floor(eY / (objHeight / maxOptionCount));

      if(hoverOptionIndex >= 0 && hoverOptionIndex < obj.options.length && obj.options[hoverOptionIndex].title.length != 0) {
           
              var tooltip = document.getElementById('dvDiv');
              tooltip.innerHTML = obj.options[hoverOptionIndex].title;
             

        mouseX=e.pageX?e.pageX:e.clientX;
        mouseY=e.pageY?e.pageY:e.clientY;
      
        tooltip.style.left=mouseX+10;
        tooltip.style.top=mouseY;
     
        tooltip.style.display = 'block';
       
        var frm = document.getElementById('frm');
        frm.style.left = tooltip.style.left;
        frm.style.top = tooltip.style.top;
        frm.style.height = tooltip.offsetHeight;
        frm.style.width = tooltip.offsetWidth;
        frm.style.display = 'block';
      } else {
        hideIE6Tooltip(e);
      }
        }

     

     

    P.S. VERY BIG THANKS for this nice solution!

     

     

     

    Monday, September 1, 2008 9:35 AM
  • Hello guys,

    I came across this issue today - this is what I came up with and worked for me:

     

    Code Snippet

    <html>
    <head>
    <script language="JavaScript">
     function onchangeS(selectEl) {
      selectEl.title = selectEl.options(selectEl.selectedIndex).title;
     }
    </script>
    </head>
    <body>
    <select id="S1" onmouseover="onchangeS(this);" onchange="onchangeS(this);">
     <option value="1" title="Cheese">A</option>
     <option value="2" title="Mango Chutney">B</option>
     <option value="3" title="Key Lime Pie">C</option>
    </select>
    </body>
    </html>

     

     

     

    Peter

    • Proposed as answer by Nitesh Mundada Tuesday, September 22, 2009 11:28 AM
    Monday, September 8, 2008 6:38 PM
  • Hi,

    In my project we have the same requirement of implementing the Tooltip in the dropdown values in IE6.I have tried your code but the tooltip is not appearing if its an dropdown it works well if its a listbox!?

    Please suggest me how to implement it for an dropdown in IE6.

    Thanks in advance,

    Regards,

    Mohan

    Wednesday, September 10, 2008 6:48 AM
  •  

    Code Snippet

    <html>
    <head>
    <script language="JavaScript">
     function onchangeS(selectEl) {
      if( selectEl.selectedIndex>-1 ) {
       selectEl.title = selectEl.options(selectEl.selectedIndex).title;
      }
     }
    </script>
    </head>
    <body>
    <select id="S1" onmouseover="onchangeS(this);" multiple="true" onchange="onchangeS(this);">
     <option value="1" title="Cheese">A</option>
     <option value="2" title="Mango Chutney">B</option>
     <option value="3" title="Key Lime Pie">C</option>
    </select>
    </body>
    </html>

     

     

    Thursday, September 11, 2008 3:17 PM
  •  Try my code:



    <html>
    <head>


        <script type="text/javascript" language="javascript"  >
       
        function showListBoxToolTip(listBoxControl, e){
         
           
            if (!e) {e = window.event;}       
            var listBox = listBoxControl;
            var eX = e.offsetX ? e.offsetX : e.layerX;
            var eY = e.offsetY ? e.offsetY : e.layerY;
            var maxOptionCount = listBox.options.length;
           
            var listItemHeight = (listBox.clientHeight / listBox.size);           
            var itemsAtTheTop =  Math.floor(listBox.scrollTop / listItemHeight);               
            var hoverOptionIndex =  Math.floor(eY / listItemHeight);       
            //the index of mouseover
            var toolTipIndex = Math.floor(hoverOptionIndex + itemsAtTheTop);
                 

      if(hoverOptionIndex >= 0 && hoverOptionIndex < listBox.options.length ) {
          
              var tooltip = document.getElementById('dvDiv');         
              tooltip.innerHTML = listBox.options[toolTipIndex].text;
            

        mouseX=e.pageX?e.pageX:e.clientX;
        mouseY=e.pageY?e.pageY:e.clientY;
     
        tooltip.style.left=mouseX+10;
        tooltip.style.top=mouseY;
     
        tooltip.style.display = 'block';
      
        var frm = document.getElementById('frm');
        frm.style.left = tooltip.style.left;
        frm.style.top = tooltip.style.top;
        frm.style.height = tooltip.offsetHeight;
        frm.style.width = tooltip.offsetWidth;
        frm.style.display = 'block';
      } else {
        hideListBoxToolTip(e);
      }
        }
        function hideListBoxToolTip(e){
            var tooltip = document.getElementById('dvDiv');
            var iFrm = document.getElementById('frm');
            tooltip.innerHTML = '';
            tooltip.style.display = 'none';
            iFrm.style.display = 'none';
        }
       
       
       
     
        </script>

    </head>
    <body>
        <div style="overflow-x:hidden; overflow-y:scroll; height:200px; width:100px">
            <select id="listBox" onmousemove="showListBoxToolTip(this, event);"  multiple="multiple"  onmouseout="hideListBoxToolTip();" >      
            </select>
        </div>
        <div id="dvDiv" style="display: none; position: absolute; padding: 1px; border: 1px solid #333333;
            background-color: #fffedf; font-size: smaller; z-index: 999;">
        </div>
        <iframe id="frm" style="display: none; position: absolute; z-index: 998"></iframe>
       
      
       
    </body>
        <script type="text/javascript">
        //load the combo box on load
        var i;
        var opt;
        var listBox = document.getElementById("listBox");
        for(i=1;i<=1000; i++)
        {
            opt = document.createElement("OPTION");
            opt.text = i + ' items for testing pursposes only';
            opt.value= i ;
            listBox.options.add(opt);
        }
       
        listBox.size = listBox.options.length;
       
        </script>

    </html>

    Friday, January 9, 2009 5:43 AM
  • Hi Aalok,

    It is simple to display tooltip by using title attribute to option

        <select>

    <option value="1" title="1">A</option>

    <option value="2" title="2">B</option>

    <option value="3" title="3">C</option>

    </select>

    Potta Vijay Kumar, Sr. Web Designer / Team Lead
    Tuesday, June 30, 2009 6:05 AM
  • Could you explain the reason for using the iframe (<iframe id="frm">)??
    Saturday, January 30, 2010 11:12 AM