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> 

あなたがそれらを見ると、おそらく学ぶことができるので、私はそれがどのようなIと仮定されています...私の変化を中心にコメント実際にやったことはありますか？