jquery cluetip과 hoverintent를 결합 하시겠습니까?

jquery의 cluetip을 사용하여 도구 설명을 표시합니다 .--) 사용자가 원하는대로 툴팁에 마우스를 움직일 수 있기를 바 랐기 때문에 나는 끈적 거리게했습니다. 그러나 사용자가 마우스를 툴팁으로 이동하지 않으면 툴팁을 잠시 후에 사라지게 할 수 있습니다. hoverintent-plugin을 사용하여이 작업을 수행 할 수 있어야합니다. 그러나이 플러그인은 사용자가 플러그인 위로 한 번 마우스를 이동하지 않는 한 시작되지 않습니다. 그럴 경우 cluetip은 툴팁을 자동으로 제거합니다 ...jquery cluetip과 hoverintent를 결합 하시겠습니까?

툴팁을 표시하고 500 밀리 초 동안 기다렸다가 사용자가 툴팁을 마우스 오버하지 않으면 사라질 수 있습니다.

내가 onMouseover와 같은 타이머 및 물건을 비활성화 툴팁에 스크립트를 추가에서 onShow와 타이머를 fireing 대해 생각해 봤는데,하지만 지나치게 복잡한 것 같다 ...

누구나 더 좋은 생각이있어? :-)

감사합니다,

폴

출처

2011-02-03 profke

이 문제에 대한 해결책을 찾았습니까? Mayie 이러한 기능을 가진 다른 툴팁 플러그인을 제안 할 수 있습니까? – Serhiy

은 좀 사용자 정의와 this lib 디렉토리를 사용합니다.

$tooltipC.html(options.content);

그리고 다음과 같이 사용할 수있는 것보다 :

$('.tooltip-target').each(function() { 
     $(this).tooltip({ 
      cssClass: "tooltip", 
      content: $($(this).attr("rel")).html() 
     }); 
    });

을 내 프로젝트에서 볼 수 있듯이 당신은 라인 77

$tooltipC.html($tooltip.data("title"));

다음 행 this 파일의 대체 할 수있다 모든 도구 팁 대상에 대해 tootlip에 대한 html로 제어 선택자와 속성 rel을 설정합니다. 다음과 같이 :

<img src="help.ico" class="tooltip-target" rel="#helpTooltip" /> 
<div style="display:none" id="helpTooltip"> 
    Some html content for tooltip 
    <a href="help.html">Details..</a> 
</div>

출처

2011-06-22 17:23:48 Serhiy

나는 그것을 지원하는 툴팁 플러그인을 모른다. 그러므로 당신 스스로 뭔가를 만들어야 할 수도있다. 다음 예는 작동하지만 일반적인 재사용이 가능하고 툴팁 플러그인을 사용하면 더 많은 작업이 필요합니다.

<a href="#" onclick="activateTip()">click here</a> 
<div id="tooltip" style="background: green; height: 30px; width: 50px; color: white; 
    display: none; position: absolute"> 
    fake tooltip 
</div> 
<script type="text/javascript"> 

    function activateTip() { 
     $("#tooltip").fadeIn(autoFade); 
    } 

    function autoFade() { 
     var cancel = setTimeout(hideTip, 3000); 
     $("#tooltip").mouseover(function() { 
      clearTimeout(cancel); 
      $("#tooltip").unbind("mouseover").mouseout(autoFade); 
     }); 
    } 

    function hideTip() { 
     $("#tooltip").fadeOut().unbind("mouseover").unbind("mouseout"); 
    } 

</script>

출처

2011-10-10 10:45:48 Trax72

이것은 다른 cluetip 기능 중 하나와 함께 'reinventing the wheel'입니다. –

이것은 어떻게 달성 할 수 있는지 보여주는 예일 뿐이며, cluetip으로 이것이 가능한지 확실하지 않습니다. – Trax72

다음과 같은 방법을 사용할 수 있습니다.

JQuery와 :

//Change it to your tooltip object- ID/Name/Class 
$("#tooltip").mouseout(function(){ 
    $(this).delay(500).queue(function() { 
    $(this).css('display', 'none'); 
    }); 
//We use this method because, user can come over the element before its disapper. 
}).mouseover(function() { 
    if($(this).is(':visible')) 
    $(this).css('display', ''); 
});

출처

2011-10-13 10:17:34 Racooon

질문은 "JQuery와 cluetip 및 hoverintent를 결합?"할 수있는 경우이다. 간단한 anwser는 다음과 같습니다. 예.

페이지에 HoverIntent 스크립트를 다운로드하여 포함하십시오. 스크립트 (+ 예)에서 찾을 수 있습니다

$basketTooltips.cluetip({ 
    attribute:  'rel', 

     // other options   

    // HoverIntent specific options 
    hoverIntent: { 
     sensitivity: 3, 
     interval:  100, 
     timeout:  500 
    }, 

});

cluetip의 HoverIntent 옵션은 동일하다 : 당신이 HoverIntent, 당신은 당신의 'ClueTip'에 대한 몇 가지 추가 옵션을 설정할 수 있습니다 포함 시켰습니다 http://cherne.net/brian/resources/jquery.hoverIntent.html

원래 HoverIntent 옵션 : http://cherne.net/brian/resources/jquery.hoverIntent.html

출처

2013-03-27 14:26:51 NickGreen

jquery cluetip과 hoverintent를 결합 하시겠습니까?

답변

관련 문제