1

我正在尝试在悬停文本时获得“工具提示”。此工具提示应放置在文本下方。工具提示应该从数据库中获取其内容，但我可以处理该部分，并使用 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 元素，因此它只会悬停在所有内容上。

谢谢你的时间，我很感激。

4

1 回答 1

0

您可以使用.hover()函数来定义 mouseover/mouseout 事件。您可以使用.after()添加新的 DIV 并将.remove()其删除。

假设这是您将鼠标悬停在的元素：

<a href="#" id="test" rel="35">Test</a>

此示例演示了效果：

$('#test').hover(
    function() {
        var text = "Tooltip for rel: " + this.rel;
        $(this).after($("<div></div>").html(text).addClass("tooltip"));
    },

    function() {
        $(this).next().remove();
    }
)

这是现场演示：http: //jsfiddle.net/3LgWk/1/

哦，jQuery 也让 AJAX 调用变得更加容易——当你有机会的时候看看它。

于 2013-11-07T22:31:02.613 回答