Discussion :

[nancy169]

Bonjour,
J'ai créer une infobulle qui permet d'afficher des informations en survolant une colonne du tableau d'un rapport créer avec Pentaho report Designer et la masquer lorsque on quitte la colonne:
le script est le suivant:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script type="text/javascript">
var tooltip=FUNCTION(){
 var id = 'tt';
 var top = 3;
 var LEFT = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.ALL ? true : false;
 RETURN{
  SHOW:FUNCTION(v,w){
   IF(tt == NULL){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   IF(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  IF(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(FUNCTION(){tooltip.fade(1)},timer);
  },
  pos:FUNCTION(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.LEFT = (l + LEFT) + 'px';
  },
  fade:FUNCTION(d){
   var a = alpha;
   IF((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   IF(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else IF(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     IF(d == -1){tt.style.display = 'none'}
  }
 },
 hide:FUNCTION(){
  clearInterval(tt.timer);
   tt.timer = setInterval(FUNCTION(){tooltip.fade(-1)},timer);
  }
 };
}();
</script>

Le script est le suivant:

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
<style type="text/css">
#tt {
 position:absolute;
 display:block;
 background:url(images/tt_left.gif) top LEFT no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-LEFT:5px;
 background:url(images/tt_top.gif) top RIGHT no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-LEFT:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-LEFT:5px;
background:url(images/tt_bottom.gif) top RIGHT no-repeat;
overflow:hidden;
}
</style>

Dans l'attribut on-mouse-over de la colonne j'ai mis :

Code :

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

tooltip.SHOW('Testing  123 ', 200);

Et dans l'attribut on-mouse-out de la colonne j'ai mis :

Code :

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

tooltip.hide();

Mais le problème qui se pose, c'est que l'infobulle ne disparu pas lorsque je quitte la colonne même que j'ai tenis compte l'attribut "on-mouse-out".
Alors qui ce que vous proposez ?? car je pense que le proplème et au niveau du code JavaScript
Merci d'avance

[NoSmoking]

Bonjour,
est tu consciente que javascript est sensible à la casse, que on-mouse-out n'existe pas il faut mettre onmouseout?

[nancy169]

NoSmoking,
Merci merci infiniment pour votre réponse
J'ai pas tapé le mot onmouseout, j'ai seulement choisis l'attribut onmouseout et je l'ai remplis par tooltip.hide(); car je tape pas le code directement dans la source je travaille avec une interface de développement des rapports décisionnel
lorsque j'ai affiché consulté le rapports et j'ai afficher le code source de ce dernier j'ai trouvé dans le code source le onmouseover, par contre le onmouseout je l'ai pas trouvé même que je l'ai mentionné dans l'interface de développement.

[nancy169]

J'ai essayé de réglé le problème en ajoutant un timer, après que ce timer termine l'infobulle disparu mais c'est pas performant dans mon cas je veux une fois je quitte la colonne l'infobulle disparu

[SpaceFrog]

Code :

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

1
2
3
4
 hide:FUNCTION(){
  clearInterval(tt.timer);
   tt.timer = setInterval(FUNCTION(){tooltip.fade(-1)},timer);
  }

c'est là que ça se passe ...

[Bovino]

après que ce timer termine l'infobulle disparu mais c'est pas performant dans mon cas je veux une fois je quitte la colonne l'infobulle disparu

Euh... t'as fait un shuffle de tous les mots là ???

[nancy169]

Bonjour,
M. SpaceFrog je sais que au niveau de la fonction hide:

Code :

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

1
2
3
4
hide:FUNCTION(){
  clearInterval(tt.timer);
   tt.timer = setInterval(FUNCTION(){tooltip.fade(-1)},timer);
  }

Que ça se passe le hide de la tooltip, plus qu"dans le onmouseout j'appelle cette fonction comme le suivant:

Code :

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

tooltip.hide();

mais le problème c'est que je fais tous correctement mais ca marche pas et je sais pas pourquoi !!!

[nancy169]

Bonjour, M; Bovino merci pour votre réponse, j'ai pas compris ce que vous voulez dire

[nancy169]

C'est bon, ca marche maintenant avec le code suivant:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<script type="text/javascript">
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();
</script>
<style type="text/css">
#tt {
 position:absolute;
 display:block;
 background:url(images/tt_left.gif) top left no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 background:url(images/tt_top.gif) top right no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}
</style>

et

Code :

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

1
2
onmouseout="tooltip.show('Testing  123 ', 200);"
onmouseout="tooltip.hide();"