Origine des tooltip avec ou sans overlay
J'ai un petit soucis de tooltip lorsque utilisé avec un overlay
Voici un schéma de ma page:
https://lh4.googleusercontent.com/-y...27.55%20AM.png
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:
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 ?
