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:
0 comments:
Post a Comment