내용이 다른 여러 jQuery 툴팁

Question

텍스트 링크 위로 마우스를 가져 가면 여기 (https://jqueryui.com/tooltip/#custom-content)와 같이 jQuery 툴팁을 사용하여 이미지 (미리보기 미리보기)를 표시합니다.

이것은 본질적으로 잘 작동하지만 현재 모든 링크는 마우스로 가리키면 동일한 이미지를 표시합니다. 내가 원했던 것은 각 링크의 도구 설명이 해당 링크에 고유 한 이미지를 표시한다는 것입니다 (효과적으로 링크 내용 미리보기).

* HTML과 CSS에 대한 기본적인 지식이 있지만 자바 스크립트와 jQuery는 여전히 어려움을 겪고 있습니다.

HTML

<div class="ui-widget photo"> 
    <div class="ui-widget-header ui-corner-all"> 
    <h1> 
    <a href="/uploads/test1.jpeg" data-geo="">Test1.</a> 
    <a href="/uploads/test2.jpeg" data-geo="">Test2.</a> 
    <a href="/uploads/test3.jpeg" data-geo="">Test3.</a> 
    </h1> 
    </div> 
</div> 

위와

$(function() { $(document).tooltip({ items: "img, [data-geo], [title]", content: function() { var element = $(this); if (element.is("[data-geo]")) { var text = element.text(); return "<img class='map' alt='" + text + "' src='/uploads/hello.jpeg'>"; } if (element.is("[title]")) { return element.attr("title"); } if (element.is("img")) { return element.attr("alt"); } } }); }); 

jQuery를

, Test1을, Test2를, 그리고 테스트 3는 모든 툴팁의 독특한 이미지를 가질 것이다.

Answer 1

난 당신이로 교체해야한다고 생각 :

$(function() { 
     $(document).tooltip({ 
      items: "img, [data-geo], [title]", 
      content: function() { 
       var element = $(this); 
       if (element.is("[data-geo]")) { 
        var text = element.text(); 
        return "<img class='map' alt='" + text + 
         "' src='" + element.attr('href') + "'>"; 
       } 
       if (element.is("[title]")) { 
        return element.attr("title"); 
       } 
       if (element.is("img")) { 
        return element.attr("alt"); 
       } 
      } 
     }); 
    }); 

Answer 2

if(element.is("[data-geo]")){ 
    var text = element.text(); 
    return `<img class='map' alt=${text} src='${element.attr('href')}'>`; 
} 

은 지금 당신은 당신은 동적 이미지 src을 변경해야합니다 이미지 return "<img class='map' alt='"+text+"'src='/uploads/hello.jpeg'>"

고정 사용합니다.