Cacher "Hide()" une infobulle
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:
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:
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:
tooltip.SHOW('Testing 123 ', 200);
Et dans l'attribut on-mouse-out de la colonne j'ai mis :
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
