JQuery와 툴팁 내가 어떤 이미지 썸네일을 확장하고 누군가가 미리 가리킬 때 전체 크기의 이미지를 보여주기 위해 JQuery와 툴팁 플러그인을 사용하기 위해 노력하고있어

Question

매우 불안해합니다. 그러나 이것은 매우 불안정합니다. 툴팁은 마우스가 정적으로 유지되는 경우에도 한 곳에서 고정되기 전에 약 2-3 회 점프합니다.

왜 그럴까요? 그것을 고칠 수있는 방법이 있습니까?

HTML 코드 :

<ul class="gallery" id="gallery"> 
    <li> 
      <img src="<?=site_url('images/Balloon Fest..jpg');?>" class="galleryImg" /> 
    </li> 
</ul> 

자바 스크립트 : 나는 것을 사용했습니다

$(".galleryImg").tooltip({ 
      delay: 0, 
      showURL: false, 
      bodyHandler: function() { 
       return $("<img/>").attr("src", this.src) 
        .attr('width', 300).attr('height', 300); 
      } 
     }); 

Answer 1

같은 jQuery를에 플러그인하지만 같은 페이지에 나에게 요소의 많은 양의 몇 가지 문제가 주어졌다 . 일부 테스트 후, 나는이 일에 대한 거부했습니다

이

당신은 작업demo here!

그리고 웹 페이지 링크

편집Here!

---

을 볼 수 있습니다 요청으로 주석에는 위의 플러그인을 기반으로하는 jQuery 확장이 있습니다 :

JQUERY

(function($) { 
    $.fn.tooltipImg = function(options) { 

    // options  
    var opts = $.extend({}, $.fn.tooltipImg.defaults, options); 

    // when the mouse gets over the element 
    $(this).hover(function(e){ 

     this.t = this.alt; 

     var c = (this.t != "") ? "<br/>" + this.t : "", 
      src = ($(this).data("src")!='') ? $(this).data("src") : this.src, 
      res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>'; 

     $("body").append(res); 

     $("."+opts.wrapper) 
     .css({ 
      "top" : (e.pageY - opts.xOffset) + "px", 
      "left" : (e.pageX + opts.yOffset) + "px" 
     }) 
     .fadeIn("fast");      
     }, 
     function(){ 
     $("."+opts.wrapper).remove(); 
     }); 

     // when the mouse moves while over the element 
     $(this).mousemove(function(e){ 
     $("."+opts.wrapper) 
      .css({ 
      "top" : (e.pageY - opts.xOffset) + "px", 
      "left" : (e.pageX + opts.yOffset) + "px" 
      }); 
     }); 

    } 

    // options defaults 
    $.fn.tooltipImg.defaults = { 
    xOffset : 10, 
    yOffset : 30, 
    wrapper : 'myTooltipImgWindow' 
    } 

})(jQuery); 

USAGE

$(document).ready(function(){ 
    $('.tooltipMe').tooltipImg(); 

    // with options 
    $('.tooltipMe').tooltipImg({ 
    xOffset : 20, 
    yOffset : 40, 
    wrapper : 'myToolTipContainerClass' 
    }); 
}); 

이 working Fiddle!

이 바이올린은 상대 경로와 imgsrc에서 크로스 도메인에서 이미지를 보여 볼 수 있습니다.

피들 (Fiddle)의 상대 경로는 버그 번호가 일 때가 있습니다. 가끔씩 보지만, 그렇지 않은 경우도 있지만 잘 작동합니다!

Answer 2

내가이 전에 일어날 본 적이 - 내가 사용하기 쉬운, 더 유연하고 쉽게 통합되는 툴팁 검색 이유입니다. Listly를 통해 멋진 도구를 발견했습니다. WalkMe.com을 확인하십시오. 결과를 매우 기쁘게 찾을 것입니다. 이미지가 어떻게 작동하는지 알려주세요.

Answer 3

내 간단한 툴팁을 쓸 때, 요소에 내 툴팁을 추가했을 때 알았습니다. IE7, IE8 및 IE9에서 도구 설명을 숨기거나 표시하는 것 사이에 불안정하거나 불안감했습니다.

예를 들어, 나는 툴팁 과민하거나 불안해 숨기기/표시 결과 $('li').append(toolTip html..)했다. 파이어 폭스, 크롬 및 사파리에서 불안하거나 불안감을 느끼지 않았습니다. IE7, IE8 및 IE9에서는 좋지 않습니다.

$('body').append(toolTip html..)으로 전환하면 IE 7, IE8 및 IE9에 대해 예상대로 표시되며 여전히 Firefox, Chrome 및 Safari에서 정상적으로 작동합니다.

Answer 4

jquery 포럼에서 해결책을 찾았습니다. 표시 및 숨기기 효과를 다음과 같이 제거하십시오.

jQuery('#myelement').tooltip({ 
    show: false, 
    hide: false 
});