Discussion :

[nancy169]

Bonjour,
merci de m'aider car je suis vraiment bloqué, et je dois avancé, je veux que lorsque la souris survole la colonne il m'affiche une infobulle qui contient un lien et losque je click sur ce lui il m'affiche une alerte.
voila le code :

Code :

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

onmouseover="tooltip.show('Testing  123 ', 200);"

alors comment je peux faire pour au lieu d'afficher seulement le texte Testing 123, il m'affiche le texte Testing 123 plus un lien en bas en clicant sur ce lien il m'affiche une alerte.
merci d'avance

[SpaceFrog]

Code :

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

onmouseover="tooltip.show('Testing  123 <br /><a href=\"javascript:alert(\'coucou\')\">lien</a>', 200);"

[nancy169]

Merci infinimet c'est gentil de votre part de me repondre je vais la teste et je reviendrais envers vous pour vous dire le resultat.
Merci encore une fois

[nancy169]

Ben, M. SpaceFrog merci ca marche très bien.
Mais j'ai trouver un problème, si c'est possible merci de m'aider encore une fois
1- Lorsque je veux cliqué sur le lien pour afficher l'alerte je perte l'infobulle, il faut que l'infobulle reste stable lorsque je la survole normalement !!! alors comment faire pour cliqué sur le lien qui se trouve dans l'info-bulle.
2- J'ai un autre problème c'est même que lorsque je quitte la colonne concerné l'infobulle doit disparaitre, par contre dans mon cas elle reste toujours, mais que j'ai indiqué la fonctions hide() dans le onmouseout.
Et voila mon code:
le script contient ca :

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>

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>

et les attributs de la colonne contient ca :

Code :

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

1
2
onmouseover="tooltip.show('Testing  123 <br /><a href=\"javascript:alert(\'coucou\')\">Clic ici pour plus de details</a>', 220);"
onmouseout="tooltip.hide();"

Alors que dois-je faire pour que c'est deux problème se résoudre ?
Merci d'avance, et je suis désolé pour le dérangement.

[SpaceFrog]

ce qui est normal vu que lors du click sur l'alert (bouton ok) tu es obglié de faire un mouseout
ce qui declenche :

Code :

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

onmouseout="tooltip.hide();"

supprime le hide sur le mouseout, mais tu devras trouver un autre endroit ou placer ton hide ...

[nancy169]

Pour le point de fixé l'infobulle pour cliqué sur le lien c'est résolu, j'ai modifié le code de la fonction pos comme le suivant :

Code :

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

1
2
3
4
5
6
 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 + 20) + 'px';
   tt.style.left = (l + left - 40) + 'px';
  },

et pour le mouse out je l'ai pas encore résolu.
Merci.

[nancy169]

Bonjour M. SpaceFrog
y a un petit problème c'est que l'infobulle clignote
et lorsque j'enlève la modification que j'ai fais au niveau de la fonction pos
Au lieu de :

Code :

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

1
2
3
4
5
6
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 + 20) + 'px';
   tt.style.left = (l + left - 40) + 'px';
  },

je fais seulement :

Code :

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

1
2
3
4
5
6
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';
  },

ou bien j'enlève le lien de l'infobulle :
au lieu de :

Code :

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

onmouseover="tooltip.show('Testing  123 <br /><a href=\"javascript:alert(\'coucou\')\">lien</a>', 200);"

je fais seulement :

Code :

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

onmouseover="tooltip.show('Testing  123', 200);"

elle clignote pas, ca veut dire que soit je peux mettre le lien à l'infobulle ou bien je met le changement de la fonction pos.
alors que dois-je faire ?? aidez moi et merci d'avance;

[nancy169]

A vrai dire ce il me faut que la tooltip reste fixe si je la survole et disparu si je la quitte ou bien je quitte la case, comme montre l'exemple suivant :

http://jquerytools.org/demos/tooltip/any-html.html
et voila mon code :
vous allez voir que la tooltip clignote

[nancy169]

Bonjour,
J'ai réglé le problème en ajoutant un un événement onClick sur la tooltip, alors losrque je clique sur un simple texte qui apparait avec un style de lien, l’alerte s'affiche sans que le tooltip clignote, et voila le code qui montre ce que je viens d'exliquer, pour ceux qui en besoin :

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
<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,a){
   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.onclick = function() { alert(a); };
    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';
   tt.onclick = function() { alert(a); };
   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 + 20) + 'px';
   tt.style.left = (l + left - 40) + 'px';
   /*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;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#f0f1e8;
 color:#000000;
 font-family: serif;
 border: 4px solid #4b6447;
 }
 
</style>

et

Code :

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

1
2
tooltip.show('- blablablabla <br /><U style="color: blue;"><FONT color="blue">Plus de détails</FONT></U>', 200,' - blablablabla \n - blablablabla');
tooltip.hide();