J'ai un petit soucis de tooltip lorsque utilisé avec un overlay

Voici un schéma de ma page:



En bleu: La liste de mes usagés ayant le role de Manager
En mauve: La liste de tous mes usagés
En rose: mon overlay permettant de mettre à jour les rôles des usagés de les faire passé d'usagé normal à Manager.

Mon problème est le suivant:

A chaque fois que le nom d'un usagé apparait celui est associé à un tooltip, pour éviter de répeter X fois la création d'un tooltip, nous avons integré une vérification pour voir si le tooltip a déjà était créé ou non:

- S'il n'a pas était créé alors on le crée.
- Sinon on le re-utilise tous simplement.

Prenons l'exemple de l'usagé A celui ci n'est pas site manager, la première fois que le tooltip est créé c'est dans l'overlay, il apparait dans ce cas à la bonne position par exemple X = 116 et Y = 82. Par contre quand je cherche a faire apparaitre le tooltip dans la partie mauve celui ci apparait dans l'overlay avec une position de X = 442 et Y = 91.

Prenons maintenant léxemple de l'usagé B le tooltip est crée dans la partie bleu est il apparait avec la position X = 280 Y = 160 ce qui est correct. Par contre dans le cadre de l'overlay, celui ci apparait à la position X = 145 Y= 82 à l'extèrieur de l'overlay.

En gros il me semble que le problème viennent du fait que l'origine est mal prise en compte, je m'explique:
- Si le tooltip est créé dans la page alors l'origine sera toujours la page complete.
- Si le tooltip est crée dans l'overlay alors l'origine sera dans l'overlay.

Voici mon code dans JQuery avec mon code de Debug:

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
32
33
34
35
36
//html_tool_tip_code based on xstooltip provided by
   //http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it
   $(document).delegate(".html_tool_tip_trigger", "mouseenter", function(event){
      var trigger = $(this);
      var tool_tip_id = trigger.attr("data-tool-tip-id");
      var tool_tip = $("#" + tool_tip_id);
      var offset_x = trigger.attr("data-offset-x") || '30';
      var offset_y = trigger.attr("data-offset-y") || '0';
 
      var x = trigger.position().left + parseInt(offset_x, 10);
      var y = trigger.position().top  + parseInt(offset_y, 10);
 
      tool_tip.css('top',  y + 'px');
      tool_tip.css('left', x + 'px');
 
      console.log(trigger.offsetParent);
 
      console.log(trigger);
      console.log(trigger.position());
 
      console.log(trigger.position().left);
      console.log(offset_x);
      console.log(x);
 
      console.log(trigger.position().top)
      console.log(y);
      console.log(offset_y);
 
      tool_tip.show();
   }).delegate(".html_tool_tip_trigger", "mouseleave", function(event){
      var trigger = $(this);
      var tool_tip_id = trigger.attr("data-tool-tip-id");
      var tool_tip = $("#" + tool_tip_id);
 
      tool_tip.hide();
   });
Est ce que quelqu'un aurait une idée ?