你如何将图像添加到一个jQuery提示(how do you add an image to a j

我还没有看到这个确切的问题解决......如果它已经，只是请点我给它。

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

请告诉我，我做错了什么。

Answer 1:

试试这个：

HTML

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

JQuery的

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

见工作小提琴 。

jQuery的1.9.1和1.9.2 jQueryUI的包括课程。 检查您的图像路径的方式是正确的。

编辑：你告诉我，你设置使用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" />' }); 

});

这是新的小提琴 ！

Answer 2:

首先，你缺少你的收盘报价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/

Answer 3:

只需直接传递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>

只记得里面使用标题单引号。

文章来源: how do you add an image to a jquery tooltip