如何将图像添加到jquery工具提示

Question

我没有看到这个确切的问题......如果有的话,请指出我.

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

});

这是新的小提琴!

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/