1

我正在尝试构建一个可悬停的 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，我想只用一个扩展来实现相同的行为，但我没有成功实现这一点。
  2. 我对“that.hide_ff”的使用似乎不正确。再一次，我认为这个变量应该属于一个“工具提示”对象，但如果我没记错的话，它是附加到 Jquery 对象本身的。

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

在此先感谢，戈迪

4

3 回答 3

2

JQuery有一个工具提示插件。如果您想自己动手，我相信您可以通过查看他们所做的来获得想法。

于 2008-10-31T19:55:32.917 回答
0

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

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

  • 我摆脱了 hidetooltip （额外的扩展）
  • 使用 that.hide_ff 很好，所以我没有改变它
  • 工具提示会在链接末尾弹出，并且不会随鼠标移动 - 我认为它看起来更干净。
  • 切换了 xOffset 和 yOffset
  • 注释掉原来的 mousemove 代码，如果你不喜欢它可以改回来。
jQuery.fn.extend({
 “工具提示”：函数（文本）{
  xOffset = 10；
  y偏移= 20；

  var that = this;
  $(this).mouseover(function(e){
   this.t = 文本；
   $("body").append(""+ this.t +"");
   $("#tooltip")
    .css('位置', '绝对')
    .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("快");
  });
  $(this).mouseout(function(){
   that.hide_ff = setTimeout('$("#tooltip").remove()', 500);
   $("#tooltip").hover(函数(){
    clearTimeout (that.hide_ff);
    },
    功能（）{
     $("#tooltip").remove();
    }
   );
  });
/*
  $(this).mousemove(function(e){
   $("#tooltip")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px");
  });
*/
 }
});
于 2009-08-27T02:22:29.410 回答
0

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

于 2009-08-27T02:37:56.093 回答