Comment faire pour que jQuery Beauty Tip reste ouvert tant que le curseur est sur le texte de l'info-bulle?

Question

J'utilise jQuery beauty tips (qui utilise également hoverIntent plugin) et je voudrais afficher un lien href dans le texte de l'info-bulle et permettre à l'utilisateur de cliquer sur le lien.

Cependant, dès que nous quittons l'ancre, le texte toottip disparaît après un certain délai (que nous pouvons définir)

Je voudrais garder le texte de l'info-bulle ouvert tant que le curseur de l'utilisateur est terminée l'ancre OU le texte de l'info-bulle.

Comment puis-je faire cela? Est-ce possible? J'ai essayé, sans succès, quelque chose comme:

$('.bt').bt({ 
postShow: function(box) { 
    $(".bt-content").hoverIntent({ 
    timeout : 500, 
    over: function() { 
     $(".bt-wrapper").show(); //or $(".bt-active").btOn(); 
    } 
    }); 
} 
}) 

Answer 1

C'est le meilleur que je pouvais faire jusqu'à présent: Ajouter ce code sur l'option de la pointe.

trigger: ['mouseenter','click'], 
postShow: function(box){ 
    var that = this; 
    $(box).bind('mouseleave',function() { 
    that.btOff(); 
    }); 
}, 

Cela fonctionne (au moins sur Firefox) mais je préférerais utiliser le hoverintent.

Answer 2

Salut merci Chris Cinelli pour la réponse ci-dessus. Cependant, le problème avec la solution ci-dessus est que l'info-bulle reste à mesure que nous sortons de l'ancre, et seulement un clic en dehors de la page déclenchera sa fermeture.

Cependant, le comportement semble être incorrect, car si l'info-bulle survient sur la souris, elle doit également disparaître (si le problème est défini sur la souris). Donc, pour obtenir ce comportement, j'avais apporté des modifications supplémentaires à celle de la solution fournie par Chris Cinelli.

Solution:

J'ai défini une toolTipRange de classe factice au réservoir extérieur dans lequel l'apparence de pop-up est valide et a ajouté le code suivant dans le spectacle post-événement

$ (« toolTipRange. »). bind ('mouseleave', function (event) {
    si (event.relatedTarget.nodeName = "TOILE") {
        that.btOff()!
   }
});

Answer 3

C'est possible. La solution suivante fonctionne avec jQuery 1.7 et hoverIntent r5. Je l'ai testé dans Chrome, Safari, FF 3.7, FF 7 et IE8.

$('.bt').bt({ 
    postShow: function(box) { 
     $(box).hoverIntent({ 
      over: function() { 
        $(this).data('hasmouse', true); 
      }, 
      out: function() { 
        $(this).data('hasmouse', false); 
        $(box).hide(); 
      }, 
      timeout: 300, 
     }); 
    }, 
    hideTip: function(box, callback) { 
     if ($(box).data('hasmouse')) { 
      return; 
     } 
     $(box).hide(); 
     callback(); 
    }, 
}); 

I utilisé hoverIntent à nouveau, cette fois sur la zone de BeautyTip, pour définir un drapeau (« data-hasmouse ») indiquant si le coursier de la souris est encore en vol stationnaire au-dessus de la bulle. Tant que l'indicateur est défini, la nouvelle méthode hideTip ne fera rien. Au lieu de cela, la boîte BeautyTip est masquée lorsque son propre "hoverIntent out" se déclenche.