Using the .load() in IE 7

Using the .load() in IE 7

I have a web page in which I'm trying to create a tool-tip that pops up when you roll over a glossary term. The tool-tip then populates from the external 'glossary.html' page. Works great in IE8 and FF. But IE 7 continues to be the thorn in my side.

On the main web page I use an 'a' tag for the term. This is the one that a tool-tip appears over:
  1. <a class="gloss" anchor="lorem_ipsum">Lorem ipsum</a>
Then another web pages has a table that holds the glossary. This is a full web page with the html head and body tags still as it needs to be accessible to view the entire glossary if the user clicks on the link.
  1. <table>
  2.       <tr>
  3.             <td>Term</td>
  4.             <td>Definition</td>
  5.             <td>Primary Lesson</td>
  6.       <tr>
  7.       <tr id="lorem_ipsum">
  8.             <td>lorem ipsum</td>
  9.             <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
  10.             <td>demo</td>
  11.       </tr>
  12. </table>
Lastly I have my jQuery code which creates the tool-tip, positions it, and populates it:
  1. function simpleTooltip(targetItems, name){
  2.       $(targetItems).each(function(i){
  3.             $("body").append("<div class='"+name+"' id='"+name+i+"'><div class='graphic'></div><h4></h4><hr><p></p></div>");
  4.             var my_tooltip = $("#"+name+i);

  6.             if($(this).attr("anchor") != "" && $(this).attr("anchor") != "undefined"){
  7.                   var termName = $(this).attr("anchor");
  8.                   $(this).removeAttr("title").mouseover(function(){
  9.                         $("#"+name+i+" h4").load("files/PE2011/glossary.html tr#"+termName+" td:nth-child(1)");
  10.                         $("#"+name+i+" p").load("files/PE2011/glossary.html tr#"+termName+" td:nth-child(2)");
  11.                         my_tooltip.css({opacity:1, display:"none"}).fadeIn(200);
  12.                   }).mousemove(function(kmouse){
  13.                         var border_top = $(window).scrollTop();
  14.                         var border_right = $(window).width();
  15.                         var left_pos;
  16.                         var top_pos;
  17.                         var offset = 24;
  18.                         if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
  19.                               left_pos = kmouse.pageX + offset;
  20.                         } else{
  21.                               left_pos = kmouse.pageX-my_tooltip.width()-offset*2;
  22.                         }

  24.                         if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
  25.                               top_pos = kmouse.pageY + offset;
  26.                         } else{
  27.                               top_pos = kmouse.pageY-my_tooltip.height()-offset*2;
  28.                         }
  29.                         my_tooltip.css({left:left_pos, top:top_pos});
  30.                   }).mouseout(function(){
  31.                         my_tooltip.fadeOut(200);
  32.                   });
  33.             }
  34.       });
  35. }
With targetItems just being the a.gloss from the main html and the name is just tooltip for CSS purposes.

IE7 just shows up a blank tool-tip. IE8+ and FF work fine.

Thanks in advance for any help!
-Cory