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