Question

我希望使用Jquery制作一个自定义工具提示，在鼠标悬停时，一个框（工具提示）会出现一张图片和一些文字信息。

我正在修改一个网站，我选择的网站是d2jsp.org。我想要做的是当我将鼠标悬停在我的帐户链接上时，工具提示会显示图片和文字。

我的HTML没有任何Jquery的工具提示文本，但我需要Jquery所以我也试图使用图片。

以下是HTML的一小部分 -

</div><div class="bar"><ul class="barR"><li><a href="http://forums.d2jsp.org/pm.php">Messages: 11</a></li><li><a href="http://forums.d2jsp.org/gold.php">Forum Gold: <b>0.01</b></a></li><li><a href="http://forums.d2jsp.org/guild.php?a=1">My Guild</a></li><li><a href="http://forums.d2jsp.org/events.php">My Events</a></li><li><a href="http://forums.d2jsp.org/track.php">Topic Tracker</a></li></ul><ul class="barL"><li>Hello,<a href="http://forums.d2jsp.org/user.php?i=476515" title="Last Seen: 0 seconds ago <br>

Last Post: 2 days ago <br>

Status: N/A" img="">Hockeygod9911<div class="sX s1"></div></a></li><li><a href="http://forums.d2jsp.org/login.php?c=8">Log Out</a></li><li><a href="http://forums.d2jsp.org/settings.php">Settings</a></li></ul><div class="c"></div></div><table width="100%">

添加title =“X”为我需要的文本添加工具提示。但我需要添加图片。

http://jqueryui.com/tooltip/#custom-content Jquery ui站点提供了以下代码：

<script>
  $(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='http://maps.google.com/maps/api/staticmap?" +
            "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
            text + "'>";
        }
        if ( element.is( "[title]" ) ) {
          return element.attr( "title" );
        }
        if ( element.is( "img" ) ) {
          return element.attr( "alt" );
        }
      }
    });
  });
  </script>

我不知道第2和第3 if语句在那里真正做了什么，我也不知道[data-geo]是什么。它还使用了一些我不熟悉的代码（项目）。

所以我理解的（我显然不正确地理解它）是项目就像对象？变量元素是我没有得到的[data-geo]，它链接到谷歌以获取图像。

这是我迄今为止编辑的Jquery -

  $(function() {
    $( document ).tooltip({
      items: "img, [img], [title]",
      content: function() {
        var element = $( this );
        if ( element.is( "[img]" ) ) {
          var text = element.text();
          return "<img class='avatar' alt='" + text +
            "' src='d2jsp Forums_files/avatar.gif" +
            "zoom=11&size=65x57&sensor=false&center=" +
            text + "'>";
        }
        if ( element.is( "[title]" ) ) {
          return element.attr( "title" );
        }
        if ( element.is( "img" ) ) {
          return element.attr( "alt" );
        }
      }
    });
  });

我只是想让它从它所在的文件夹中显示一张图片。

带有图像的jquery工具提示

0 个答案: