afficher une seule info-bulle lorsque différents événements de différentes cibles sont déclenchés ?

Question

J'ai quelques contrôles de saisie et de sélection dans mon formulaire, chacun d'entre eux ayant une petite icône en forme de point d'interrogation devant eux, qui affichera une info-bulle lorsque la souris passe sur ce gif avec l'aide de l'excellent plug-in jquery jquery.qtip-1.0.0-rc3.js(avec jquery-1.3.2.min.js) comme ceci :

   $('#questionmark1').qtip({
        content: 'sample help content'
        , style: { name: 'sampleStyle' }
        , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
    });

Je souhaite également afficher l'info-bulle lorsque le champ d'entrée correspondant est focalisé et la masquer lorsqu'il devient flou. L'exemple suivant fait l'affaire mais sans afficher l'info-bulle lorsque la souris passe sur le gif.

  $('#questionmark1').qtip({
        content: 'sample help content'
        , style: { name: 'sampleStyle' }
        , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
         , show: { when: { target: $('#input1'), event: 'focus'} }
        , hide: { when: { target: $('#input1'), event: 'blur'} }
    });

mais le problème est que quelque chose comme ne fonctionne pas.

  show: { when: { target: $('#input1'), event: 'focus'},
                { target: $('#questionmark1'), event: 'focus'} }

En bref, les deux premiers blocs de code précédents fonctionnent bien et je peux ajouter les deux pour atteindre mon objectif, mais je veux le faire de la bonne façon.
Comment puis-je cibler plusieurs événements cibles pour afficher une seule info-bulle ?

Answer 1

Il n'est pas nécessaire de câbler tous les événements d'affichage et de masquage dans l'appel à la fonction qtip() . Je définirais le mouseover comme l'événement qui déclenche le qtip par défaut :

$('#questionmark1').qtip({
      content: {text:'sample help content', prerender: true}
      , style: { name: 'sampleStyle' }
      , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
      , show: { when: 'mouseover' }
  });

(Notez l'option de prérendu que j'ai ajoutée)

Ensuite, définissez manuellement les gestionnaires d'événements pour l'entrée pour laquelle vous souhaitez afficher l'info-bulle :

$("#input1").bind("focusin", function() {
    $("#questionmark1").qtip("show");
}).bind("blur", function() {
    $("#" + this.id + "-tip").qtip("hide");
});

Voir un exemple ici : http://jsfiddle.net/andrewwhitaker/wCgAM/

La seule chose étrange est que vous pouvez faire apparaître les deux infobulles en vous concentrant sur la première entrée et en passant la souris sur le second point d'interrogation. C'est probablement assez facile à corriger.

J'espère que cela vous aidera.