Несколько подсказок jQuery с разным контентом

Question

Я использую всплывающую подсказку jQuery для отображения изображения (миниатюра предварительного просмотра) при наведении курсора на текстовую ссылку, как показано здесь ( https://jqueryui.com/tooltip/).

По сути, это прекрасно работает, но в настоящее время каждая ссылка отображает одно и то же изображение при наведении курсора. Я хочу, чтобы во всплывающей подсказке каждой ссылки отображалось изображение, уникальное для этой ссылки (для предварительного просмотра содержимого ссылки).

* У меня есть базовое понимание как 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

Я думаю, вы должны заменить это:

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