Tooltip on hover of select

Tooltip on hover of select

I have select boxes which allow the user to choose multiple options. Due to the length of the text in some of the options not all of the text appears. I have created a tooltip that appears when the user hovers of one of the options.

The problem comes in IE that it does not seem to recognise the selector $('select option')

This is my HTML
<html>
<head>
<title>Select Tooltip</title>
<style type="text/css">
.selectTooltip {
   position: absolute;
   z-index: 2;
   background: #fff;
   border: 1px solid #d3d3d3;
   padding: 3px;
}
</style>
<script type="text/javascript" src="js_files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js_files/selects.tooltip.js"></script>
</head>
<body>
<select name="mySelect" multiple="multiple" size="5" class="multiSelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</select>

<div id="test" style="border:1px solid red;padding:10px;margin-top:20px;">
<p>Test responses</p>

<ul></ul>

</div>

</body>
</html>


And here is my javascript

$(document).ready(function() {
   
   //Position tooltip function
   var positionTooltip = function(event) {
      var tPosX = event.pageX - 5;
      var tPosY = event.pageY + 20;
      $('div.selectTooltip').css({top: tPosY, left: tPosX});
   };
   
   //Show tooltip function
   var showTooltip = function(event) {
      $('div.selectTooltip').remove();
      var $thisTitle = $(this).text();
      $('<div class="selectTooltip">Click to highlight all articles written by ' + $thisTitle + '</div>').appendTo('body');
      positionTooltip(event);
   };
   
   //Hide tooltip function
   var hideTooltip = function() {
      $('div.selectTooltip').remove();
   };

   $('.multiSelect option').each(function() {
      $(this).hover(showTooltip, hideTooltip).mousemove(positionTooltip);
   });
   
   //Need to add a mouseout event to the select as tooltips do not hide if the user moves off of the select horizontally
   $('.multiSelect').mouseout(hideTooltip);
   
});


If anyone could help me out it would be much appreciated.

Thanks