Désactivation de l'info-bulle "Tipsy" lorsque vous passez la souris sur

Question

Je souhaite utiliser l'info-bulle en forme de barre d'outils. En survolant un lien, je voudrais que la barre d'outils apparaisse, disons un div, et lorsque je pénètre dans la zone de la barre d'outils, je veux qu'elle reste visible, pas masquée. Donc mes questions sont:

• Comment afficher une div cachée?
• Comment conserver l'info-bulle visible lorsque j'entre dans la zone de l'infobulle?

Answer 1

Tipsy prend en charge le déclenchement "manuel". Donc, ce que vous voulez faire est d'avoir l'événement "onmouseover" sur votre lien appelez la fonction tipsy('show'), puis pour la partie qui se cache, bien ... probablement faire deux choses: lorsque vous faites votre spectacle, définissez un délai d'attente que l'auto -pièces après x secondes. Ensuite, définissez également un événement onmouseout pour votre info-bulle qui appelle tipsy('hide').

EDIT: a changé le code à quelque chose qui fonctionne réellement, voir ici: http://jsfiddle.net/6FpM8/3/ Merci à @Josh me piquer pour le faire fonctionner.

var timer; 

//setup the toolbar and tipsy 
$('#mylink').attr('title','Input here:<input id="toolbar">'); 
$('#mylink').tipsy({trigger:'manual',gravity:'w', html:true}); 

//.tipsy class is what the generated tooltip divs have, so we use the 
//live event to link the mouseover/mouseout events 
$('.tipsy').live('mouseover',function(e){ 
    clearTimeout(timer); 
}); 
$('.tipsy').live('mouseout',function(e){ 
    timer = setTimeout("$('#mylink').tipsy('hide');",3000);//hide the link in 3 seconds 
}); 

//manually show the tooltip 
$('#mylink').bind('mouseover',function(e){ 
    $(this).tipsy('show'); 
}); 

Answer 2

Je l'ai fait en modifiant Tipsy lui-même. Tipsy attache l'élément infobulle au document.body, dans la méthode show de Tipsy.prototype:

$tip.remove().css({ 
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(document.body); 

Si vous changez la pointe d'être un enfant de l'élément déclencheur, puis jQuery mouseleave ne se déclenche pas si vous êtes dans l'info-bulle:

dans mon cas

$tip.remove().css({ 
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(this.$element[0]); 

, j'ai un div avec l'attribut title qui détient la pointe, et la div contient l'image que l'utilisateur cible. (Je ne sais pas si cela fonctionnerait si l'élément qui tient le bout est sans enfants, comme un img.) J'active Tipsy sur le div.