Bonjour,


Le contexte
J'utilise le plugin Tooltips (http://mootools.net/forge/p/tooltip) avec MootoolsCore 1.4.5 compatibility YUI et MootoolsMore 1.4.0.1 compatibility YUI.

[Si je veux être plus exact, j'utilise également le framework CSS squaregrid et le framework php smarty --- mais je ne pense pas qu'ils soient impliqués dans mon problème].

Mon site est constitué d'une DIV "menu", d'une DIV "contenugauche" et d'une DIV "contenudroit" (dont voici le code via firebug pour plus tard ---désolé, j'ai pas trouvé la balise forum SPOILER).

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html slick-uniqueid="3">
<head>
<body>
<div id="wrapper">
<div id="container">
<div id="menu2" class="sg-35 sgParent">
<div id="sautdeligne" class="sg-35 sgParent"> </div>
<div class="clear"></div>
<div id="contenu" class="sg-35 sgParent">
<div id="contenugauche" class="sg-21 sgParent">
<div id="contenudroit" class="sg-13 sgParent">
</div>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript" language="javascript">
<script type="text/javascript" language="javascript">
</body>
</html>


À partir du menu2, je génère dans le "contenugauche" un nuage de mots (une suite de span).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<span id="N548" class="Z termeaffiche MT0 termecomplet "> test7 </span>
Un clic sur chacun de ces mots affiche un tooltip qui affiche d'autres mots liés au mot ciblé.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script language="javascript" type="text/javascript">
window.addEvent('domready',function() {
 
  var motaff = $$('.Z');
  motaff.each(function(element) {
    // Gestionnaire d'évènement 'click'
   element.addEvents( {
 
    'click' : function() {	
        var Tid=element.get('id');
	var maRegex= new RegExp("[0-9]+");
	var Nid=Tid.match(maRegex);
 
	       var myRequestProposer = new Request.HTML( {
			data:'Nid='+Nid,
			onFailure: function() {
			 } ,
			onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
 
			  ToolTip.instance(element, responseHTML, { autohide: false }).show();	
 
		       } ,
			url: 'affichagedemonmot.php',
			data:'Nid='+Nid,
 
		} ).send();		      
	  } //mouse clic     	    
    } ); //AddEvents
  } ); //each
} ); //wae
</script>

Et j'obtiens bien ce que je veux :

<div class="tooltip" style="display: block; position: absolute; left: 168px; top: 0px;">
<div class="close" title="Close"></div>
<span id="affichagemotsassocies" class="dispoinput sg-15 sgParent">
<span class="termeaffich textemotsassocies sg-2 sgParent"> test3 </span>
<span class="termeaffich textemotsassocies sg-2 sgParent"> test2 </span>
<span class="termeaffich textemotsassocies sg-2 sgParent"> test1 </span>
<span id="mm1" class="sg-2 pointer cmoi texte50">MODIF></span>
</span>
<span id="recept">AFFICH</span>
</div>

Le problème
Le problème étant que je ne peux faire aucune action sur les éléments que contient le tooltip.

Voici la structure de page que j'obtiens en ayant affiché le tooltip (via firebug):

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html slick-uniqueid="3">
<head>
<body>
<div id="wrapper">
<script type="text/javascript">
<script type="text/javascript" language="javascript">
<script type="text/javascript" language="javascript">
<div class="tooltip" style="display: none; position: absolute; left: 210px; top: 68px;">
<div class="tooltip-arrow css-arrow-up" style="border-width: 0px 10px 10px; display: none; position: absolute; left: 448px; top: 58px;"></div>
<div class="tooltip" style="display: block; position: absolute; left: 168px; top: 0px;">
<div class="tooltip-arrow css-arrow-down" style="border-width: 10px 10px 0px; display: block; position: absolute; left: 401px; top: 66px;"></div>
</body>
</html>
J'aimerai donc pouvoir sélectionner un élément à l'intérieur du tooltip.
In fine, je voudrais qu'un click sur le span "mm1" lance un request (Request.HTML je pense) qui affiche dans le même tooltip d'autres infos (en fait un formulaire).

Je n'ose pas dire depuis combien de temps j'essaye de trouver une solution.
D'avance, merci de votre aide.