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