jquery UI tooltip html avec des liens
Je veux utiliser jquery UI info-bulle.
Dans l'info-bulle, je veux qu'il y aura un lien en html.
J'ai vu ce post (L'INTERFACE utilisateur de Jquery tooltip ne prend pas en charge le contenu html) qui dit que la façon de travailler avec le format html à l'intérieur de la bulle d'aide.
Mais il y a un problème lorsque je veux ajouter un lien à l'intérieur de la bulle d'aide.
Quand je suis venu avec le curseur pour entrer dans l'info-bulle en cliquant sur le lien, l'info-bulle a disparu (parce que je mouseout à partir de l'élément affecté à l'info-bulle.
Que puis-je faire?
Grâce.
Mise à JOUR:
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
Exemple: http://jsfiddle.net/jLkcs/
source d'informationauteur Nir
Vous devez vous connecter pour publier un commentaire.
En raison de la nature de l'INTERFACE utilisateur de jQuery tooltip n'est pas possible de sortir de la boîte.
Vous pouvez ajouter un peu d'astuce (qui se trouve sur jQuery forum, mais le lien perdu...) pour laisser l'info-bulle délai de clôture, et vous permettre d'avoir le temps de cliquer sur les liens.
Utilisé l'api docs: http://api.jqueryui.com/tooltip/
Code:
Démo: http://jsfiddle.net/IrvinDominin/jLkcs/5/
Ressemble au votre, aller les mains dans le cambouis et modifier le code jQuery ainsi que sur la mousout les cas, il ne fermez pas si vous êtes à la survole.
Ou comme alternative, vous pouvez regarder le twitter bootstrap info-bulle et la liste, je pense, de mémoire, vous pouvez passer un événement déclencheur type de la liste.
http://getbootstrap.com/2.3.2/javascript.html#popovers
Irvin Dominin est accepté réponse a été d'une grande aide pour moi. Je l'ai développée, si quelqu'un a la même exigence supplémentaire que j'avais.
Je voulais mettre aussi un retard sur l'affichage des info-bulles. Parce que le "spectacle" l'option est définie sur null, j'avais besoin de le reproduire. (le spectacle option est définie sur null pour arrêter le popup visiblement redessiner lorsque la souris se déplace de la bulle d'aide de retour à l'appel de lien).
J'avais besoin de mettre un temps de retard, depuis une page j'ai été en développement avaient beaucoup d'utilisateur d'info-bulles et affichage instantané a été un peu discordante avec la souris sur la page.
Ma solution a été d'utiliser l'événement open pour masquer l'info-bulle et ajouter un délai d'attente avant de les afficher à nouveau. L'exception à cette règle est que, si la même info-bulle est déjà ouvert, et de trier ce que j'ajoute un vrai/faux attribut de données pour chaque élément lors de l'ouverture/fermeture (obtenir le code source de l'élément de l'ouvrir et de fermer les fonctions n'a pas été facile, mais je pense que c'est à droite).
Avertissement: je ne suis pas maître de JQuery, et il pourrait bien y avoir un moyen beaucoup plus facile à reproduire. Je suis coincé en bas de lapin-trous avec le code parfois, de sorte que le code ci-dessous peut-être de mauvais conseils...
Noter que j'ai aussi ajouté un peu de classes et le positionnement de mes fenêtres pop-up pour mettre une flèche à l'appel de lien. De Plus, mon contenu a été dérivée à partir d'un objet utilisateur fichier chargé sur la page. J'ai supprimé ces espérons le rendre plus facile à utiliser.