IE6 Tooltip for Select element workaround
7/13/2010 11:01:00 PM | 
Posted by
VijayKumar Yadavalli
In my project, we have a requirement to show huge list of data in a select element. Some of these data has long names to show but the restriction what we have is, Select element has to be in a fixed width to fit it in our UI. So to accomplish the requirement we have the following options
Option 1: Show Horizontal and vertical scroll bars so that user scrolls to see the full name.
Option 2: Show full name in a tooltip on mouse over.
Option 1 is not a good choice to me since it has scroll bars which spoils UI look and feel. Even though i tried this option and later i found that Select element won’t have any horizontal scroll bar by default in IE6 (Bug). Later i found that they have workaround to achieve this functionality.
I googled lot for option 2 and found couple of solutions, but it worked partially. so i made the couple of changes to fit my needs. Following is the code i used for IE6 tooltip.
<!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(obj, e)
{
if (!e)
{
e = window.event;
}
var eX = e.offsetX ? e.offsetX : e.layerX;
var eY = e.offsetY ? e.offsetY : e.layerY;
var maxOptionCount = obj.options.length;
var listItemHeight = (obj.clientHeight / obj.size);
var itemsAtTheTop = Math.floor(obj.scrollTop / listItemHeight);
var hoverOptionIndex = Math.floor(eY / listItemHeight);
//the index of mouseover
var toolTipIndex = Math.floor(hoverOptionIndex + itemsAtTheTop);
if(hoverOptionIndex >= 0 && hoverOptionIndex < obj.size )
{
var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = obj.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
{
hideIE6Tooltip(e);
}
}
function hideIE6Tooltip(e)
{
var tooltip = document.getElementById('ie6SelectTooltip');
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:90px">
<select id="test" title="Title on the select" onmousemove="showIE6Tooltip(this,event);" onmouseout="hideIE6Tooltip();" size="20" >
<option value="1" title="This is the number 1 option, with a really long title based tooltip">1 Thing</option>
<option value="2" title="This is the number 2 option, with a really long title based tooltip">2 Thing</option>
<option value="3" title="This is the number 3 option, with a really long title based tooltip">3 Thing</option>
<option value="4" title="This is the number 4 option, with a really long title based tooltip">4 Thing</option>
<option value="5" title="This is the number 5 option, with a really long title based tooltip">5 Thing</option>
<option value="6" title="This is the number 6 option, with a really long title based tooltip">6 Thing</option>
<option value="7" title="This is the number 7 option, with a really long title based tooltip">7 Thing</option>
<option value="8" title="This is the number 8 option, with a really long title based tooltip">8 Thing</option>
<option value="9" title="This is the number 9 option, with a really long title based tooltip">9 Thing</option>
<option value="10" title="This is the number 10 option, with a really long title based tooltip">10 Thing</option>
<option value="11" title="This is the number 11 option, with a really long title based tooltip">11 Thing</option>
<option value="12" title="This is the number 12 option, with a really long title based tooltip">12 Thing</option>
<option value="13" title="This is the number 13 option, with a really long title based tooltip">13 Thing</option>
<option value="14" title="This is the number 14 option, with a really long title based tooltip">14 Thing</option>
<option value="15" title="This is the number 15 option, with a really long title based tooltip">15 Thing</option>
<option value="16" title="This is the number 16 option, with a really long title based tooltip">16 Thing</option>
<option value="17" title="This is the number 17 option, with a really long title based tooltip">17 Thing</option>
<option value="18" title="This is the number 18 option, with a really long title based tooltip">18 Thing</option>
<option value="19" title="This is the number 19 option, with a really long title based tooltip">19 Thing</option>
<option value="20" title="This is the number 20 option, with a really long title based tooltip">20 Thing</option>
</select>
</div>
<div id="ie6SelectTooltip" 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>
For me the above code worked vary well. I hope this code is useful for some one. If so, please leave some comments below.
Labels:
Internet Explorer JavaScript Debugging
Most of the time people frustrated with JavaScript errors since the lack of information provided by the browser. You can use alert’s to find out where it went wrong but this is annoying by number of clicks. So you have to use some debugging tools for browser.
If you are a .NET Developer, Visual Studio comes with inbuilt JavaScript debugging tool. But what if you are neither a .NET developer nor you have Visual Studio. In this case Microsoft provides a free tool called “Microsoft Script Debugger” which you can download it from here. As of i know, this is the free and best tool for debugging JavaScript on Internet Explorer.
To use either Visual Studio or Microsoft Script Debugger as your debugging tool, you have to turn debugging on in IE. To do that Go to Tools –> Internet Options –> Advanced tab. Make sure that “Disable Script debugging (Internet Explorer)” is not checked.
Once you restart the browser, you can load your page which you want to test it. If there are any errors on the page, it shows a Dialog box asking whether to debug or not and just press OK button. That’s it. Now you can see where exactly the error happens and analyze accordingly.
If in case you want to debug specific line irrespective of error. You can put a line debugger; in your JavaScript code. so it will create a break point automatically and when this breakpoint gets hit, your debugger will lunch.
Hope this helps some one.
