Discussion :

[Rakken]

Bonjour,

Je suis entrain de réaliser un système d'infobulle en css. Certains mots des textes de mon site doivent avoir une définition affiché.
J'ai déjà un résultat correct mais avec deux soucis.

Quand je passe sur un mot a définition, j'ai bien une infobulle, mais celle est passe en "dessous" des autres mots a définition.
Mon texte est compris dans un div avec un overflow, pour simuler une frame avec une barre de défilement, mais quand mon infobulle est sur le bord, elle passe de nouveau en "dessous" et elle est tronquée.

La portion de code ci-dessous illustre bien mon problème (surtout sous ie, mais mon code complet me fait également le problème sous firefox)

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
<style>
a.info {
  position: relative;
  text-decoration: none;
  color : #600000; 
  cursor : default;
}
a:hover.info {
  text-decoration: none; 
}
a.info span {display: none;}
a:hover.info span {
  display: inline; 
  position: absolute;  
  top: 1.5em; 
  left: 0.5em; 
  z-index: 20; 
  background: #c3a67a; 
  color: #000000; 
  border: 1px solid #000000; 
  width: 150px; 
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  padding: 2px 4px;
}
</style>
 
<div style="overflow:auto; width='200px'; height='300px'; background: #c3a67a;" >
Je fais un test <a href="javascript:;" class="info">de lien<span><b>Telat</b> : On connaît plus communément le telat sous le nom de "<i>champignon d'un jour</i>", dénomination faisant référence à sa manière de pousser. L'on dira usuellement qu'on ne "cueille" pas le telat mais qu'on le "chasse", car il pousse si vite qu'un champ parfaitement vide la veille peut être couvert de telat parfaitement matures le lendemain matin.</span></a> pom pom pom.<br >
 
Je fais un test <a href="javascript:;" class="info">de lien<span><b>Telat</b> : On connaît plus communément le telat sous le nom de "<i>champignon d'un jour</i>", dénomination faisant référence à sa manière de pousser. L'on dira usuellement qu'on ne "cueille" pas le telat mais qu'on le "chasse", car il pousse si vite qu'un champ parfaitement vide la veille peut être couvert de telat parfaitement matures le lendemain matin.</span></a> pom pom pom.<br >
</div>

J'ai essayé de jouer sans succés avec des "z-index" et autres "float" "position:absolute/relative" ... mais rien n'y fait.

Si quelqu'un a une solution... Merci d'avance !


Si quelqu'un a une idée pour me sortir de là...

[mr32]

Tu es embeté à cause de ton OVERFLOW

Si tu veux le garder, essayer plutôt une solution de ce type

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
<style>
a.info {
  position: relative;
  text-decoration: none;
  color : #600000; 
  cursor : default;
}
a:hover.info {
  text-decoration: none; 
}
a.info span {display: none;}
a:hover.info span {
  display: block; 
  position: absolute;  
  top: 1.5em; 
  left: 0.5em; 
  z-index: 20; 
  background: #c3a67a; 
  color: #000000; 
  border: 1px solid #000000; 
  width: 150px; 
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  padding: 2px 4px;
}
</style>
 
<script type="text/javascript">
<!--
function display(id) {
	document.getElementById(id).style.display = (document.getElementById(id).style.display == 'block') ? 'none' : 'block';
}
 
-->
</script>
 
<div style="overflow:auto; width='200px'; height='300px'; background: #c3a67a;" >
Je fais un test <a href="javascript:display('info1');" class="info">de lien</a> pom pom pom.<br />
 
Je fais un test <a href="javascript:display('info2');" class="info">de lien</a> pom pom pom.<br />
</div>
 
<div id="info1" style="display: none;"><span><b>Telat</b> : On connaît plus communément le telat sous le nom de "<i>champignon d'un jour</i>", dénomination faisant référence à sa manière de pousser. L'on dira usuellement qu'on ne "cueille" pas le telat mais qu'on le "chasse", car il pousse si vite qu'un champ parfaitement vide la veille peut être couvert de telat parfaitement matures le lendemain matin.</span></div>
<div id="info2" style="display: none;"><span><b>Telat</b> : On connaît plus communément le telat sous le nom de "<i>champignon d'un jour</i>", dénomination faisant référence à sa manière de pousser. L'on dira usuellement qu'on ne "cueille" pas le telat mais qu'on le "chasse", car il pousse si vite qu'un champ parfaitement vide la veille peut être couvert de telat parfaitement matures le lendemain matin.</span></div>

[Rakken]

Ta solution fonctionne bien, mais ne convient hélas pas... ce que je veux, c'est vraiment simuler le comportement d'un "title".
Afficher le texte ailleur ne me sert pas vraiment.

Mais merci quand même ;-)

Une autre idée peut-être ?

[mr32]

manipule display avec "onmouseover" et "onmouseout" sur ta balise A, et tu arriveras sans soucis à tes fins