具有不同内容的多个 jQuery 个工具提示

Question

当鼠标悬停在文本 link 上时，我正在使用 jQuery 工具提示显示图像（缩略图预览），如此处所示 (https://jqueryui.com/tooltip/#custom-content)。

这在本质上工作正常，但目前每个 link 在悬停时显示相同的图像。我想要的是每个 link 上的工具提示显示该 link 独有的图像（有效预览 link 的内容）。

*我对 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" );
              }
          }
      });
  } );

如上，Test1、Test2 和 Test3 在其工具提示中都有独特的图像。

Answer 1

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。

Answer 2

我认为你应该替换为：

$( 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" );
              }
          }
      });
  } );