Jqueryはマウスを上に移動してプロンプトボックスをポップアップし、消去構想とコードを移動することを実現する.

考え方:
1.まず、この効果を実現する要素を特定し、今回はclassで
2.異なるプロンプトを動的に表示する場合はtitleを設定する
3.JQでエレメントにmouseoverとmouseoutイベントを追加
4.さらに改善すると、ポップアップボックスはマウスに従ってターゲット要素を移動する
5.さらにmouseover、mouseoutをhoverに統合する

 
  
//       
  
$(function () { 
  
    var x = 10; 
  
    var y = 20; //            ，       
  
    $(".prompt").hover(function (e) {  //       
  
        this.myTitle = this.title; // title         myTilte ，       
  
        this.title = ""; 
  
        var tooltipHtml = "
" + this.myTitle + "
"; //      
  
        $("body").append(tooltipHtml); //       
  
        $("#tooltip").css({ 
  
            "top": (e.pageY + y) + "px", 
  
            "left": (e.pageX + x) + "px" 
  
        }).show("fast"); //        ，    
  
    }, function () {  //       
  
        this.title = this.myTitle;  //    title 
  
        $("#tooltip").remove();  //      
  
    }).mousemove(function (e) {   //         
  
        $("#toolti").css({ "top": (e.pageY + y) + "px", 
  
            "left": (e.pageX + x) + "px" 
  
        }); 
  
    }); 
  
});