툴팁이로드되는 동안 마우스 커서 옆에 회전 아이콘 (jQuery)

Question

회전로드 아이콘을 마우스 커서 옆에 표시하려는 독특한 상황이 있습니다.

이 아이콘은 사용자가 div 위로 마우스를 가져 가면 표시됩니다. 1300ms 지연 후 도구 설명이 표시됩니다. 툴팁이 지연되는 동안 회전 아이콘이 표시되고 툴팁이 표시되면 숨 깁니다.

나는 jquery-ui .position extension을 사용하여 코드를 작성했으며 필요한 것을 얻었습니다. 그러나 도구 설명이 표시되고 회전 아이콘이 사라지면 마우스 커서를 움직이면 오른쪽으로 돌아옵니다. 마우스를 div 밖으로 이동시킬 때까지 아이콘이 영구적으로 사라지길 바랍니다. 예를 들어

---

은 : 나는 jsfiddle of this scenario을 만들었습니다.

Product Info Container 위에 마우스 커서를 올려 놓습니다. 회전 아이콘이 나타나고 1300ms 후에 툴팁이 표시되고 회전 아이콘이 사라집니다. 그러나 마우스를 다시 움직이면 아이콘이 다시 나타납니다.

---

마우스를 움직 였는지 여부에 관계없이 툴팁이 표시되면 어떻게 회전 아이콘을 숨길 수 있습니까?

jQuery code 지금까지 가지고있는 jQuery 코드는 다음과 같습니다.

jQuery(document).ready(function($) { 
    var delay = 1300; 
    var timeout; 
    $('.product-bottom-info-container').hover(
     function(e) { 
      var that = $(this); 
      timeout = setTimeout(function() { 
       that.find('.product-custom-tooltip-container').css({ 
        display: 'inline-block', 
        position: 'fixed', 
        zIndex: '5000', 
        margin: '10px', 
        whiteSpace: "nowrap" 
       }).position({ 
        my: "right+10 center", 
        at: "center", 
        of: e, 
        collision: "fit flip" 
       }); 

       $('.mouse-spinner').hide(); 
      }, delay); 
     }, 
     function() { 
      clearTimeout(timeout); 
      $(this).find('.product-custom-tooltip-container').hide(); 
      $('.mouse-spinner').hide(); 
     } 
    ).mousemove(function(e) { 
     $('.mouse-spinner').css({ 
      display: 'inline-block', 
      position: 'fixed', 
      zIndex: '5000', 
     }).position({ 
      my: "left+10 top+12", 
      at: "center", 
      of: e, 
      collision: "flip" 
     }); 
    }); 
}); 

감사합니다.

Answer 1

당신은 당신의 스타일 시트의 클래스를 통해 스피너 CSS의 정적 인 부분을 설정하고 툴팁이 활성화 될 때 다시 정의 할 수 있습니다. 또는 mousemove 함수 내에서 코드의 조건으로 "timeout"을 체크하거나 mousemove 함수 실행 조건으로 추가 클래스를 설정할 수 있습니다. 사례를 해결할 수있는 많은 솔루션이 있습니다.