jQueryを使用したイメージのツール転倒

Question

イメージの上に乗るときに簡単なツールチップをアクティブにする方法がわかります。これは十分な基本的なことだろうと思ったが、

HTML、苦労

<div class = "runners"> 
    <h1> Hover to see famous runners</h1> 
    <img id = "mo-farah" src="Images/mo-farah.jpg" title = "Mo Farah"> 
</div> 

jQueryの

this.tooltip = function() { 
    xOffset = 10; 
    yOffset = 20; 
    $("div").hover(function(e) { 
     this.t = this.title; 
     this.title = ""; 
     $("body").append("<p id='tooltip'>" + this.t + "</p>"); 
     $("#tooltip") 
      .css("top", (e.pageY - xOffset) + "px") 
      .css("left", (e.pageX + yOffset) + "px") 
      .fadeIn("fast"); 
     }, 
     function() { 
     this.title = this.t; 
     $("#tooltip").remove(); 
     }); 
    }; 

    $(document).ready(function() { 
    tooltip(); 
    }); 

私はjQueryのに画像自体をリンクする必要がどこかわかりません。

曖昧さに対する謝罪、これは私ができる最高のものです。 Youtube/stackを使用してヘルプを見つけようとしましたが、役に立つことはありません。どんな助けでも大変に感謝します。

Answer 1

jQueryへの参照を追加する前に、jQueryへの参照を追加する必要があります。

this.tooltip = function(){    
 
xOffset = 10; 
 
yOffset = 20;  
 
$("div").hover(function(e){        
 
    this.t = this.title; 
 
    this.title = "";          
 
    $("body").append("<p id='tooltip'>"+ this.t +"</p>"); 
 
    $("#tooltip") 
 
    .css("top",(e.pageY - xOffset) + "px") 
 
    .css("left",(e.pageX + yOffset) + "px") 
 
    .fadeIn("fast");   
 
    }, 
 
function(){ 
 
    this.title = this.t;  
 
    $("#tooltip").remove(); 
 
    });    
 
    }; 
 

 
$(document).ready(function(){ 
 
    tooltip(); 
 
});

img{ 
 
    width: 200px; 
 
    height: 150px; 
 
}

<!-- Add jQuery reference first !--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- jQuery UI reference added after jQuery reference !--> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 

 
<div class = "runners"> 
 
    <h1> Hover to see famous runners</h1> 
 
    <img id = "mo-farah" src="http://www.mofarah.com/img/bgs/home.jpg" title = "Mo Farah"> 
 
    <img id = "usain-bolt" src="http://cdn.cnn.com/cnnnext/dam/assets/160815202407-usain-bolt-smiles-jeanne-moos-pkg-large-169.jpg" title = "Usain Bolt"> 
 
    <img id = "haile-gebreselassie" src="http://cdn.images.express.co.uk/img/dynamic/83/285x214/323348_1.jpg" title = "Haile Gebreselassie"> 
 
</div>