javascript - DOMでテキストをマウスオーバーすると、新しいdiv要素を最初から作成します

Question

テキストをホバリングする際に「ツールチップ」を取得しようとしています。このツールチップは、テキストの下に配置する必要があります。ツールチップはデータベースからコンテンツを取得する必要がありますが、その部分を処理して css でスタイリングできます。ここでの唯一の問題は、マウスオーバー時に新しい div 要素を最初から作成できないことです。

私の現在のコードは既存の div 要素を使用していますが、コードはコードを配置する新しい div 要素を作成することになっています。

<script>
   function createTooltip(str)
   {
      if (str == "" || !str)
      {
         return;
      }

      if (window.XMLHttpRequest)
      {
         xmlhttp = new XMLHttpRequest();
      }
      else // code for IE5 and IE6
      {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.onreadystatechange = function()
      {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
         }
      }
      xmlhttp.open("GET", "tooltip.php?s="+str, true);
      xmlhttp.send();
   }

   function removeTooltip()
   {
      document.getElementById("txtHint").innerHTML = "";
   }
   </script>
   <p><br>
   <a href="" rel="35" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip();">Test</a>
   <br><br>
   <div id="txtHint"></div></p>

tooltip.php ファイルには、次の内容が含まれています。

<?php
$q = intval($_GET['s']);
echo $q;
?> 

今のところ、関数内の rel 属性を出力するだけです。ここで本当にやりたいことは、既存の div の代わりに、xml 応答を含む完全に新しい div を作成することです。したがって、この既存の div のように、このツールチップはテキストの下に表示されます。将来的にはホバー div 要素にする予定なので、すべてのコンテンツにホバーします。

お時間をいただき、ありがとうございます。