多個不同內容的jQuery工具提示

Question

當鼠標懸停在文本鏈接上時，我使用jQuery工具提示來顯示圖像（縮略圖預覽），如此處所示（https://jqueryui.com/tooltip/#custom-content）。

這在其本質上工作得很好，但目前每個鏈接在懸停時顯示相同的圖像。我想要的是每個鏈接上的工具提示都顯示該鏈接唯一的圖像（有效地預覽鏈接的內容）。 *我對HTML和CSS有基本的瞭解，但JavaScript和jQuery我仍在努力 - 所以任何幫助都非常感謝。

HTML

<div class="ui-widget photo"> 
    <div class="ui-widget-header ui-corner-all"> 
    <h1> 
    <a href="/uploads/test1.jpeg" data-geo="">Test1.</a> 
    <a href="/uploads/test2.jpeg" data-geo="">Test2.</a> 
    <a href="/uploads/test3.jpeg" data-geo="">Test3.</a> 
    </h1> 
    </div> 
</div> 

jQuery的

$(function() { 
     $(document).tooltip({ 
      items: "img, [data-geo], [title]", 
      content: function() { 
       var element = $(this); 
       if (element.is("[data-geo]")) { 
        var text = element.text(); 
        return "<img class='map' alt='" + text + 
         "' src='/uploads/hello.jpeg'>"; 
       } 
       if (element.is("[title]")) { 
        return element.attr("title"); 
       } 
       if (element.is("img")) { 
        return element.attr("alt"); 
       } 
      } 
     }); 
    }); 

如上所述，測試1，Test2和Test3的都會有自己獨特的提示圖像。

Answer 1

我想你應該有這種替換：

$(function() { 
     $(document).tooltip({ 
      items: "img, [data-geo], [title]", 
      content: function() { 
       var element = $(this); 
       if (element.is("[data-geo]")) { 
        var text = element.text(); 
        return "<img class='map' alt='" + text + 
         "' src='" + element.attr('href') + "'>"; 
       } 
       if (element.is("[title]")) { 
        return element.attr("title"); 
       } 
       if (element.is("img")) { 
        return element.attr("alt"); 
       } 
      } 
     }); 
    }); 

Answer 2

if(element.is("[data-geo]")){ 
    var text = element.text(); 
    return `<img class='map' alt=${text} src='${element.attr('href')}'>`; 
} 

現在你使用固定圖像 return "<img class='map' alt='"+text+"'src='/uploads/hello.jpeg'>"

你應該改變動態影像src。