Question

我正在尝试构建一个可缓存的Jquery工具提示。当我将鼠标悬停在某个元素上时，此工具提示会出现，并保留如果我选择将鼠标悬停在工具提示本身上。只有当我将鼠标悬停在原件上时，工具提示才会消失元素或来自工具提示体。

根据我发现的一个例子，我设法创建了这种行为，但是因为我是Jquery的新手，所以我很高兴听到你的评论改善功能。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="jquery-1.2.6.min.js"></script>
<style>
#tooltip{
       position:absolute;
       border:1px solid #333;
       background:#f7f5d1;
       padding:2px 5px;
       color:#333;
       display:none;
       text-align: left;
}

</style>


</head>
<body>

<script type="text/javascript">
jQuery.fn.extend({
       'tooltip': function(text){
                               xOffset = 10;
                               yOffset = 20;

                               var that = this;
                       $(this).mouseover(function(e){
                               this.t = text;
                               $("body").append("<div id='tooltip'>"+ this.t +"</div>");
                               $("#tooltip")
                                       .css('position', 'absolute')
                                       .css("top",(e.pageY - xOffset) + "px")
                                       .css("left",(e.pageX + yOffset) + "px")
                                       .fadeIn("fast");
                   });
                       $(this).mouseout(function(){
                               that.hide_ff = setTimeout('$("#tooltip").hidetooltip()', 1000);
                               $("#tooltip").hover(function(){
                                       clearTimeout (that.hide_ff);
                               },
                               function(){
                                       $("#tooltip").hidetooltip()
                               });

                               //$("#tooltip").hidetooltip()
                   });
                       $(this).mousemove(function(e){
                               $("#tooltip")
                                       .css("top",(e.pageY - xOffset) + "px")
                                       .css("left",(e.pageX + yOffset) + "px");
                       });
       },

       'hidetooltip': function()
       {
               var that = this;
               $(this).remove();
               if (that.hide_ff)
               {
                       clearTimeout (that.hide_ff);
               }
       }
});

</script>
<a id="fff">ToolTip</a>

<div id="tooltip_share_text" style="display:none">
       <div style="width: 100px;">
       This is a Tooltip.
       <br/>
       <a href="javascript:void(0)" onclick="alert('boo')"> Click Me</a>
       </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
       $("#fff").tooltip($('#tooltip_share_text').html());
});
</script>

</body>
</html>

最让我困扰的是两件事：

我需要使用2个函数扩展Jquery（工具提示和 hidetooltip），我想只用一个实现相同的行为延期，但我没有成功完成这项工作。
我对“that.hide_ff”的使用似乎不对。一旦再次，我认为这个变量应该属于“工具提示”对象，但是如果我没有弄错，它会附加到Jquery对象本身。

此外，我很高兴听到任何其他改进......

提前致谢， GORDI

Answer 1

JQuery有一个tooltip plugin。如果您愿意自己动手，我相信您可以通过查看他们所做的事情来获取想法。

Answer 2

我不确定你是否仍然对此感兴趣...已经差不多一年了o.O

但我稍微修改了你的代码：

我摆脱了hidetooltip（额外的扩展名）
使用that.hide_ff很好，所以我没有改变它
工具提示会在链接末尾弹出，不会随着鼠标移动 - 我觉得它看起来更干净。
切换xOffset和yOffset
注释掉原始的mousemove代码，以便您可以在不喜欢的情况下将其更改回来。

jQuery.fn.extend({
 'tooltip': function(text){
  xOffset = 10;
  yOffset = 20;

  var that = this;
  $(this).mouseover(function(e){
   this.t = text;
   $("body").append(""+ this.t +"");
   $("#tooltip")
    .css('position', 'absolute')
    .css("top",(this.offsetTop + yOffset) + "px") /* .css("top",(e.pageY - xOffset) + "px") */
    .css("left",(this.offsetLeft + this.offsetWidth) + "px") /* .css("left",(e.pageX + yOffset) + "px") */
    .fadeIn("fast");
  });
  $(this).mouseout(function(){
   that.hide_ff = setTimeout('$("#tooltip").remove()', 500);
   $("#tooltip").hover(function(){
    clearTimeout (that.hide_ff);
    },
    function(){
     $("#tooltip").remove();
    }
   );
  });
/*
  $(this).mousemove(function(e){
   $("#tooltip")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
  });
*/
 }
});

Answer 3

我发现qTip已满足我的所有工具提示需求：

改进工具提示代码

代码：

3 个答案: