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:
Est ce que quelqu'un aurait une idée ?
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(); });
Partager