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

【问题标题】：Multiple jQuery tooltips with different content具有不同内容的多个 jQuery 工具提示
【发布时间】：2018-03-05 08:07:21
【问题描述】：

我正在使用 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" );
              }
          }
      });
  } );

如上所述，Test1、Test2 和 Test3 在其工具提示中都有唯一的图像。

【问题讨论】：

标签： jquery twitter-bootstrap jquery-ui jquery-ui-tooltip

【解决方案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" );
              }
          }
      });
  } );

【讨论】：

【解决方案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。

【讨论】：