Discussion :

[ordiminnie]

Bonjour,

Je développe une mini-fonctionnalité de tooltip très classique qui affiche une info-bulle au click de la souris sur un "?", change cette image pour une "croix rouge" et change l'évènement associé de "ouvrir tooltip" vers "fermer tooltip".
Vraiment rien d'extraordinaire, comme je vous le disais.

Je voudrais qu'on puisse fermer l'info-bulle par un click, donc je voudrais que l'évènement "click" sur la bulle déclenche l'évènement en cours sur l'image. (j'espère que je suis claire). Mais je ne vois pas comment faire. (voir dans mon code où j'ai mis //CODE)

Voici mon code :
HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span style="position:relative;bottom:1px;"><img class="tip" src="../img/common/interrog.png" title="click to read the tip" alt="" /><span class="tipText" style="display:none;">ici le contenu du tip</span></span>

JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	$('.tip').toggle(
		function(){								
			$(this).next().show();
                        $(this).attr({ src: '../img/common/close.png' });
			$(this).next().click(function(){
                                //CODE
			});
 
		},
		function(){								
			$(this).next().hide();
			$(this).attr({ src: '../img/common/interrog.png' });				
		});

Idée : peut-être que je peux nommer les deux fonctions définies dans toogle ?

merci de votre aide !

[ordiminnie]

ok, c'était si simple que je n'y avais pas pensé !
La solution :
remplacer "//code" par "$(this).prev().click();"

Vive jquery !