Comment empêcher une infobulle jquery.qtip2 de se cacher lorsque la souris est au-dessus de l'infobulle ?

Question

Utilisation de jquery qTip2 pour les infobulles.

J'ai une infobulle contenant un lien. Je veux que l'info-bulle reste ouverte si la souris de l'utilisateur entre dans l'info-bulle (et non dans le déclencheur). Je n'arrive pas à trouver comment le faire dans la fenêtre de l'outil. documentation ....

Answer 1

Si vous voulez qu'il reste visible lorsque vous passez la souris sur l'info-bulle, mais que vous souhaitez qu'il disparaisse à la sortie de la souris, utilisez les options fixe et retardée comme suit décrite dans la documentation ici :

$('.selector').qtip({
     content: {
          text: 'I hide on mouseout, but you can mouse into me within 500ms',
     },
     hide: {
          fixed: true,
          delay: 500
     }
});

Le paramètre "cacher" a plusieurs options. Par exemple, si vous souhaitez simplement ne pas le masquer indéfiniment, il suffit de définir hide sur false :

$('.selector').qtip({
    content: {
        text: 'I never hide',
    },
    hide: false
});

Si vous souhaitez qu'il soit masqué lors d'un événement différent, comme un clic à l'extérieur de l'info-bulle, définissez l'événement de manière explicite :

$('.selector').qtip({
     content: {
          text: 'I hide when you click anywhere else on the document',
     },
     hide: {
          event: 'unfocus'
     }
});

Si vous voulez qu'il se cache lorsque le déclencheur est cliqué, spécifiez l'événement de clic :

$('.selector').qtip({
     content: {
          text: 'I hide when you click the tooltip trigger',
     },
     hide: {
          event: 'click'
     }
});

Voir notamment la documentation sur les options "cacher". pour plus d'informations.

Answer 2

Si vous souhaitez que l'info reste ouverte et qu'elle soit ensuite masquée lorsque l'utilisateur clique en dehors de la cible ou quitte la cible :

show: {
    event: 'mouseover'
},

hide: {
     event: 'click mouseleave'
}