JQuery UI工具提示：每个工具提示都有不同的图像

Question

我对JavaScript很陌生，所以请原谅，如果这是一个愚蠢的问题。

我试图为每个工具提示显示不同的图像。 JQuery UI已经设置好了，所以里面的文字就是图片的名字。

看看我下面的代码：

HTML：

<div id="tooltip" class="option-child"><a id="ceramic-pro-rain" title="The Title" data-geo="Rochester" href="#" >• 1 layer of Rain on all windows and glass</a></div> 

的JavaScript

<script type="text/javascript"> 
    $(function() { 
     $(document).tooltip({ 
     //items: "a, [data-geo], [title]", 
     items: "a", 
     position: { 
      my: "left center-29", 
      at: "right+10 center+18" 
     }, 
     content: function() { 

       var element = $(this); 

       if (element.is("[data-geo]")) { 
        var text = element.text(); 
        return "<img class='map' alt='" + text + 
        "' src='http://www.sample.com/img/tooltip/" + 
        text + ".jpg" + "'>"; 
       } 

       if (element.is("[title]")) { 
        return element.attr("title"); 
       } 

       if (element.is("img")) { 
        return element.attr("alt"); 
       } 
      } 
     }); 
    }); 

Answer 1

当你的提示选择是items: "a"然后下面的语句将永远不会执行。

if (element.is("img")) { 
    return element.attr("alt"); 
} 

解决方案：

如果你想提示添加到所有a & img标签带或不带[data-geo]尝试以下JS。

$(document).tooltip({ 
    items: "a,img", 
    position: { 
     my: "left center-29", 
     at: "right+10 center+18" 
    }, 
    content: function() { 
     var element = $(this); 
     if(element.is("[data-geo]")){ 
      return '<img class="map" alt="'+ $(this).data('geo') +'" src="http://lorempixel.com/image_output/'+ $(this).data('geo') +'.jpg" />'; 
     } 

     if (element.is("[title]")) { 
      return element.attr("title"); 
     } 

     if (element.is("img")) { 
      return element.attr("alt"); 
     } 
    } 
}); 

我也添加了html来覆盖所有可能的变体。

<div id="tooltip" class="option-child"> 
    <a id="ceramic-pro-rain" title="The Title" data-geo="Rochester" href="#" >• 1 layer of Rain on all windows and glass</a> 
    <img src="http://lorempixel.com/400/200/sports/" alt="sports image"> 
</div> 
<a id="ceramic-pro-rain" title="The Title" href="#" >• Link without data-geo</a> 

jsfiddle link