Info-bulle JqueryUI en cliquant sur le bouton au lieu de hover pour apparaître ailleurs
Je suis en utilisant JQueryUI info-bulle d'afficher une certaine dynamique des messages à l'utilisateur. Fondamentalement, je veux afficher l'info-bulle au-dessus d'un champ de saisie lorsqu'un utilisateur clique sur un bouton.
La façon dont j'ai codé il ne fonctionne que lorsque vous passez la souris sur le haut de la touche, et JQueryUI exemples il n'y a pas d'aide sur la réalisation de ce scénario. Comment puis-je différer de planer effet et de le faire fonctionner avec l'événement click du bouton? Comment puis-je y parvenir?
Je suis en utilisant jquery-ui-1.9.0.custom.js
et jquery-1.8.2.js
pour cela.
Code HTML:
Je veux afficher le message sur le dessus de cette zone de saisie
<input id="myInput" type="text" name="myInput" value="0" size="7" />
Le bouton sur lequel je clique dans l'ordre à bulle
<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" />
JQuery Code
$(document).ready(function() {
$(".myBtn").tooltip({
content: function () {
return '<span id="msg">Message</span>';
},
position: {
my: "center bottom",
at: "center top"
}
});
});
source d'informationauteur Swarne27
Vous devez vous connecter pour publier un commentaire.
La façon la plus simple est de supprimer l'attribut title de
myBtn
et déplacez votre info-bulle sur un autre élément. Par exemple:Alors vous pouvez faire:
De même, vous pouvez fermer la tooltip avec
Pour fermer automatiquement l'info-bulle après l'ouverture, vous avez juste besoin d'appeler le
close
méthode à l'intérieur de laopen
événement:À l'aide de
e.target
(commethis
ne fonctionnera pas à l'intérieur de laopen
événement) etsetTimeout()
pour définir un délai après lequel l'info-bulle se ferme.