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

Question

我使用jQuery工具提示在文本链接上悬停时显示图像(缩略图预览)，如下所示(https://jqueryui.com/tooltip/#custom-content)。

这在本质上很好，但目前每个环节在悬停时都显示相同的图像。我想要的是每个链接上的工具提示显示该链接所特有的图像(有效地预览链接的内容)。

*我对HTML和CSS都有基本的理解，但我仍然在努力地使用JavaScript和jQuery --因此，任何帮助都是非常感谢的。

<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

我认为你应该用这个来代替：

$( 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。