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();