18

我还没有看到这个确切的问题得到解决......如果已经解决，请指出我。

我正在使用 jquery 的 ui 工具提示。我有一个链接，当您将鼠标悬停在它上面时，我想显示一张图片。到目前为止，没有什么对我有用。

标题中的ui代码：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

HTML：

(see <a id='riverroad' href='#' title='' >image of 1 Maple St.</a>)

代码：

$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg/>" });

请告诉我我做错了什么。

4

3 回答 3

19

试试这个：

html

<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>

jQuery

$( "#riverroad" ).tooltip({ content: '<img src="yourImagePath" />' });

见工作小提琴。

当然包括 Jquery 1.9.1 和 JqueryUI 1.9.2。顺便检查一下你的图片路径是否正确。

编辑：您告诉我您正在使用 jQuery 设置链接，请参阅第二个工作示例：

html

<div id="content">    
</div>

jQuery

$(document).ready(function() {
   $("#content").html('<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>');
   $("#content #riverroad").tooltip({ content: '<img src="http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png" />' }); 

});

这是新的小提琴！

于 2013-03-07T15:10:33.493 回答
7

首先，您缺少src标签的结束引号。您的代码应该是：

$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg' />" });

此外，这应该使用jQueryUI 网站上显示的以下代码：

HTML：

<a id='riverroad' href='#' title='' >image of 1 Maple St.</a>

JS：

<script>
  $(function() {
    $( document ).tooltip({
      items: "a",
      content: function() {
        var element = $( this );
        if (element.attr('id') === 'riverroad') {
          return "<img class='map' src='./images/myimage.jpg' />";
        }
      }
    });
  });
</script>

这是关于 jsFiddle 的演示：http: //jsfiddle.net/QgPEw/1/

于 2013-03-07T15:01:10.110 回答
4

只需在标题中直接传递 HTML 内容就可以了。

<a id="riverroad" href="#" title="<img src='http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png'" >image of 1 Maple St.</a>

只要记住在title中使用单引号即可。

于 2016-10-10T06:11:35.147 回答