Tooltip using jQuery
===

I have tried to call out my document.getElementByID to get the ID from my current form. But it doesn't hover out the specific text that i input rather than it output 'â€‹'. As reference from [Tooltip/hover-text in an array][1], i have amended some stuff but still the tooltip text does not show.

    In my html page:
    
    <script>
	$(document).ready(function () 
	{
                var tooltip_Text = $('#tooltip_Text');
		var tooltip = $('#tooltip');
		document.getElementById("Hobby").hover(
			function() 
                        {
				tooltip.fadeIn(200);
			},
			function() 
                        {
				setTimeout ( function () {
					tooltip.fadeOut(200); student.php();
				}, 1000);
			}
		);
		document.getElementById("Hobby").bind('change', function() 
                {
			student.php('user has changed the value');
		});​
	});​
    </script>
    
    //my list/menu
    <select name="OffenceName" id="Hobby" ><span id="Hobby"></span>
    <?php $arr = array('', 'cycling', 'badminton', 'jetskiing', 'ice-skating');
      for($i = 0; $i < count($arr); $i++)
      {
         echo "<option value=\"{$arr[$i]}\" {$selected}>{$arr[$i]}</option>\n"; 
      }
    ?>
    </select>
    <tool id="tooltip" class="tooltip">
    <?php $toolarr = array('','cycling is...', 'badmintion is...', 'jetskiing is...', 'ice-skating is...');
      for($t = 0; $t < count($toolarr); $t++)
      {
          if($toolarr[t] == $arr[i])
          {
             echo "sample display";
          }
      }
    <span id="tooltip_Text"></span>
</tool>​

I can't manage to call out the tooltip text below even if i try to get element by id instead of student.php(); Kindly advise.


  [1]: http://stackoverflow.com/questions/11416584/tooltip-hover-text-in-an-array