javascript - 複数の結果を持つ getElementByClassName

Question

DOM と Javascript で作成された小さなコードがあります。リンクの下にツールチップを作成する必要があります。1 つのリンクに対して意図したとおりに機能しますが、複数のリンクが必要であることに気付いたので、今までの<a id>ように使用することはできません。

私のコードでは、現在 xmlhttp 部分をコメントアウトしていますが、将来的には必要になります。気にしないでください。

Javascript:

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

      if (window.XMLHttpRequest)
      {
         xmlhttp = new XMLHttpRequest();
      }
      else // 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;
            var tooltip = document.createElement("div");
            var link = document.getElementById("tooltip");
            tooltip.setAttribute('id', 'tooltip-style');
            tooltip.innerHTML = "<p>piece of crap</p>";

            if (str == link.rel)
            {
               link.parentNode.insertBefore(tooltip, link.nextSibling);
            }
         /*}
      }
      xmlhttp.open("GET", "tooltip.php?s="+str, true);
      xmlhttp.send();*/
   }

   function removeTooltip(str)
   {
      var tooltip = document.getElementById("tooltip-style");
      tooltip.setAttribute('id', '');
      tooltip.innerHTML = "";
   }

HTML:

<a href="#" rel="35" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip(this.rel);" id="tooltip">Item</a><br><br>
<a href="#" rel="25" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip(this.rel);" id="tooltip">Item</a>

コードは、すべてのリンクではなく、ホバリングしたリンクの下に div ブロックを作成することになっています。getElementByClassName を数時間いじってみましたが、うまくいきません。<a rel>また、値が将来的に一意の値になる可能性はほとんどないことに注意してください。

お時間をいただきありがとうございます。私はそれを感謝します。