使用jQuery的工具提示


Tooltip using jQuery

我曾尝试调用我的document.getElementByID以从当前表单中获取ID。但它不会悬停在我输入的特定文本上,而不是输出"。作为数组中Tooltip/hover文本的引用,我修改了一些内容,但工具提示文本仍然没有显示。

Updated code-
In my html page:
<script>
$(document).ready(function () 
{
            var tooltip_Text = $('#tooltip_Text');
    var tooltip = $('#tooltip');
    $('#Hobby').hover(
        function() 
                    {
            tooltip.fadeIn(200);
        },
        function() 
                    {
            setTimeout ( function () {
                tooltip.fadeOut(200); student.php();
            }, 1000);
        }
    );
    $('#Hobby').bind('change', function() 
            {
        student.php('user has changed the value');
    });​
});​
</script>
//my list/menu
<select name="OffenceName" id="Hobby" ><span id="Hobby"></span>
<?php $arr = array('', 'cycling', 'badminton', 'jetskiing', 'ice-skating');
  for($i = 0; $i < count($arr); $i++)
  {
     echo "<option value='"{$arr[$i]}'" {$selected}>{$arr[$i]}</option>'n"; 
  }
?>
</select>
<tool id="tooltip" class="tooltip">
<?php $toolarr = array('','cycling is...', 'badmintion is...', 'jetskiing is...', 'ice-skating is...');
  for($t = 0; $t < count($toolarr); $t++)
  {
      if($toolarr[t] == $arr[i])
      {
         echo "sample display";
      }
  }
<span id="tooltip_Text"></span>

即使我试图通过id而不是student.php()获取元素,我也无法调用下面的工具提示文本;请告知。

您不应该使用本机javascript选择器而是使用jQuery选择器来选择元素。按照目前的情况,您的代码无法工作,因为只有当您的元素被jquery对象包装时,您调用的方法才存在。

所以不是

document.getElementById("Hobby").hover(...

使用

$("#Hobby").hover(...

您的代码应该抛出以下几个错误:

TypeError: Object #<HTMLDivElement> has no method 'hover'

编辑:

几个错误:

//my list/menu不是有效的HTML注释

student.php()无效

试试这个;

$(document).ready(function () 
{
    $("#Hobby").hover(function(){
        $("#tooltip").fadeIn("slow");
    },
    function(){
        $("#tooltip").fadeOut();
    });

    $('#Hobby').change(function() {
      $("#tooltip_Text").text("user has changed the value"); // or you can use .html("...") intead of .text("...")
    });
});​