多个不同内容的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。