编辑jquery工具提示脚本以禁用默认工具提示

Question

以下是来自webdesign tuts+的工具提示脚本。很好的工作，但它不能禁用默认的工具提示。

我缺乏相应更新此脚本的技能。我非常感谢编辑，将禁用默认工具提示！

谢谢。

<script type="text/javascript"> 
    $("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element 
     var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link " 
     var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element 
     var $tooltip_text = $(this).attr("title"); //get title attribute of "a" element 

     if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters 

      $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above 

      $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left 
      $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left 
      $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left 

      $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip 
     } 
    }); 

    $("a").mouseleave(function() { //event fired when mouse cursor leaves "a" element 
     var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link " 

     //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue 
     $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function() { 
      $(this).remove(); 
      $(this).dequeue(); 
     }); 
    }); 
</script> 

Answer 1

试试这个。当工具提示显示时，它将删除title属性，因此默认的属性不会显示，则它稍后再次设置title属性。

这里有一个例子：http://jsfiddle.net/pnc3r/2/

var $tooltip_text; 

    $("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element 
      var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link " 
      var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element 
      $tooltip_text = $(this).attr("title"); //get title attribute of "a" element 

      if ($(this).hasClass("tooltip_link")) { 

       $(this).attr("title",""); // removes the tooltip 
      } 

      if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters 

       $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above 

       $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left 
       $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left 
       $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left 

       $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip 
      } 
     }); 

     $("a").mouseleave(function() { //event fired when mouse cursor leaves "a" element 

      $(this).attr("title",$tooltip_text); // puts the tooltip back 
      $tooltip_text = ""; 

      var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link " 

      //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue 
      $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function() { 
       $(this).remove(); 
       $(this).dequeue(); 
      }); 
     }); 

Answer 2

从理论上讲，这应该工作，虽然我没有测试它：

<script type="text/javascript"> 
var $tooltip_text; 

$("a.tooltip_link").mouseenter(function (e) { //event fired when mouse cursor enters "a" element 
     var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link " 
     var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element 
     $tooltip_text = $(this).attr("title"); //get title attribute of "a" element 


    /* 
    * My changes: 
    */ 

     $(this).attr("title", ""); // remove title text to stop default tooltip 

     // end changes (one more in the bottom function 


    if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters 

     $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above 

     $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left 
     $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left 
     $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left 

     $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip 
    } 
}); 

$("a.tooltip_link").mouseleave(function() { //event fired when mouse cursor leaves "a" element 
    var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link " 

    //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue 
    $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function() { 
     $(this).remove(); 
     $(this).dequeue(); 
    }); 


    /* 
    * My changes: 
    */ 
    $(this).attr("title", $tooltip_text); // return the title text to the anchor element 
    // end changes 


}); 
</script> 

我在我的评论的变化，所以你可以看到他们，也许学习......这是假设我已经做了实际的工作。