Placing dialog box next to mouse hover

Placing dialog box next to mouse hover

Hi,

I'm attempting to use a jquery UI dialogue as a tooltip, I have a table with items in cells that respond to hover and display a tooltip.

The problem I have though is that when I hover, the box does not appear next to the cursor, ideally I should be just to the right of it.

It seems to work fine when the whole table is on the page, but when it extends beyond that it starts placing the box in odd places.

Here is a sample of my example code:

  1. <html>
       <head>
          <title>test1</title>
          <link type="text/css" href="css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
          <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
          <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
          <script type="text/javascript">
             $(function() {
                $('.fillme').each(function() {
                   var $link=$(this);
                   var p = $(this).position();
                   var $dialog = $("div."+this.id)
                   .dialog({
                      autoOpen: false,
                      position: [p.left+50,p.top],
                      resizable: false,
                      width:3,
                      minHeight:20
                   });
                   $link.hover(
                   function() {
                      $dialog.dialog('open');
                      return false;
                   },
                   function() {
                      $dialog.dialog('close');
                      return false;
                   });
                });
                $(".ui-dialog-titlebar").hide();
             });
          </script>
          <style type="text/css" >
             .fillme{text-decoration: underline; cursor: pointer; color: blue; }
             #filltext{visibility: hidden;display: none; }
             tr{height:200px}
          </style>
       </head>
       <body>
          <p>Example</p>
          <table width="100%" >
             <thead>
                <tr><th>fff</th><th>fff</th><th>fff</th><th>fff</th><th>fff</th></tr>
             </thead>
             <tbody>
                <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td><td><div class="fillme" id="02">test5</div></td></tr>
                <tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td><td>test5</td></tr>
                <tr><td>test1</td><td>test2</td><td>test3</td><td><div class="fillme" id="04">test4</div></td><td>test5</td></tr>
                <tr><td>test1</td><td>test2</td><td><div class="fillme" id="05">test3</div></td><td>test4</td><td>test5</td></tr>
                <tr><td>test1</td><td><div class="fillme" id="03">test2</div></td><td>test3</td><td>test4</td><td>test5</td></tr>
             </tbody></table>
          <div id="filltext">
             <div class="01">
                filltext1
             </div>
             <div class="02">
                filltext2<br />
                filltext2 other
             </div>
             <div class="03">
                filltext3
             </div>
             <div class="04">
                filltext4<br />
                filltext4<br />
                filltext4<br />
                filltext4<br />
                filltext4<br />
             </div>
             <div class="05">
                filltext5
             </div>
          </div>
       </body>
    </html>