改进工具提示代码

时间:2008-10-31 19:04:32

标签: javascript jquery tooltip

我正在尝试构建一个可缓存的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>

最让我困扰的是两件事:

  1. 我需要使用2个函数扩展Jquery(工具提示和 hidetooltip),我想只用一个实现相同的行为 延期,但我没有成功完成这项工作。
  2. 我对“that.hide_ff”的使用似乎不对。一旦 再次,我认为这个变量应该属于“工具提示”对象,但是 如果我没有弄错,它会附加到Jquery对象本身。
  3. 此外,我很高兴听到任何其他改进......

    提前致谢, GORDI

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

我不确定你是否仍然对此感兴趣...已经差不多一年了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");
  });
*/
 }
});

答案 2 :(得分:0)

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