Łączenie cluetip jquery z hovercentem?

Question

Używam cluetip jQuery do pokazywania, huh, tooltips :-) Zrobiłem je lepkie, ponieważ chcę, aby użytkownik mógł przesuwać mysz do wyświetlonej podpowiedzi - jeśli chcą. Jeśli jednak użytkownik nie przesunie kursora myszy na etykietę narzędzia, chcę, aby etykieta zniknęła po pewnym czasie. Wydaje mi się, że powinno to być możliwe dzięki pluginowi hoverintent. Ale ta wtyczka nie uruchamia się, chyba że użytkownik raz przesunie mysz nad plugin. Jeśli tak się stanie, cluetip sam wyjmie etykietkę narzędzia ...

Jak wyświetlić etykietę narzędzi, odczekać 500 ms, a jeśli użytkownik nie kliknie myszą w etykietkę, to zniknie?

Myślałam o fireing timer z onShow, dodając skrypt do podpowiedzi, które onmouseover wyłącza timer i takie tam, ale to wydaje się zbyt skomplikowane ...

Ktoś ma lepszy pomysł? :-)

Dzięki

Paul

Answer 1

używam this lib z pewnych dostosowań. Można zastąpić linia 77

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

z this pliku z następującej linii:

$tooltipC.html(options.content); 

I nie można go używać w następujący sposób:

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

Jak widać w moim projekcie dla każdego celu etykiety narzędziowej ustawiam atrybut rel z selektorem kontroli z html dla tootlip. W następujący sposób:

<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> 

Answer 2

Nie znam wtyczki z tooltipem, która to obsługuje, więc być może trzeba samemu coś stworzyć. Poniższy przykład działa, chociaż uczynienie go generycznym, wielokrotnego użytku i użycie wtyczki tooltip będzie wymagało więcej pracy.

<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> 

Answer 3

Możesz użyć poniższej metody, aby to zrobić.

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', ''); 
}); 

Answer 4

Pytanie było, czy jest możliwe, aby "Połącz jquery cluetip i hoverintent?". Prosty anwser to: tak.

Po prostu pobierz i umieść skrypt HoverIntent na swojej stronie. Skrypt (+ przykłady) można znaleźć na stronie: http://cherne.net/brian/resources/jquery.hoverIntent.html

Kiedy dołączyliśmy HoverIntent, można ustawić kilka dodatkowych opcji dla „ClueTip”:

opcje HoverIntent

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

     // other options   

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

}); 

cluetip są równe oryginalne opcje HoverIntent, dostępne pod adresem: http://cherne.net/brian/resources/jquery.hoverIntent.html