Discussion :

[Anium]

Bonjour,

J'ai suivi ce tuto http://r-hunel.developpez.com/tutoriels/css/info-bulle/ pour créer une infobulle.

Je l'ai adapté sur une balise <tr> contenant un select afin que l'infobulle s'affiche à droite du select.

Voici le morceau de code concerné :

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
<tr id="tr_4_parent" class="info_bulle">
		<td class="form"></td>
		<td class="form"><label for="4_parent">Service générique parent</label></td>
 
		<td>&nbsp;&nbsp;</td>
		<td class="form">
			<select id="4_parent" name="parent" onchange="" >
				<option class="optionNonSelectionnee"  value="- - -">- - -</option>
				<option class="optionNonSelectionnee"  value="Blabla1">Blabla1</option>
				<option class="optionNonSelectionnee"  value="Blabla2">Blabla2</option>
				<option class="optionNonSelectionnee" style="background:#CCFFCC;" value="Blabla3">Blabla3</option>
			</select>
 
		</td>
		<td>
		   <div><b>Blabla3</b></div>
		</td>
	</tr>

La partie CSS :

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
tr.info_bulle div
{								   
    position       :  absolute;
    top            :  -2000em;
    left           :  -2000em;
    width          :  1px;
    height         :  1px;
    overflow       :  hidden; 
    background     :  #DDEEFF;   /* Définition du fond, sinon on a le même que notre lien */
    border         :  1px solid #6699FF; /* Définition des bordures */
    text-align     : left;
} 
 
/* Rend visible tout notre bloc div et lui attribue une taille */
tr.info_bulle:hover div, tr.info_bulle:focus div, tr.info_bulle:active div 
{
    top        :  auto;
    left       :  auto;
    width      :  220px;
    height     :  auto;
    overflow   :  visible;
}
 
tr.info_bulle:hover 
{
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}

Mon problème est que sous IE, je n'ai aucun affichage (impeccable sous FF, Chrome, Opera)..

Qu'ai je loupé ?

Merci d'avance.

[desert]

Bonjour,
La pseudo-classe :hover ne marche sur les liens sous IE (du moins IE6 ou inférieur).
Pour simuler le même comportement, tu vas devoir passer par Javascript.

[Anium]

Et sous IE7 et 8, ça devrait pourtant marcher ? Non ?

[Macmillenium]

Bonjour,

Et sous IE7 et 8, ça devrait pourtant marcher ? Non ?

Oui pas de problème avec IE7+

[Anium]

Pourtant, je n'ai aucun affichage avec mon code cité plus haut sous IE7 et +.

[_jey_]

J'avais trouvé assez facilement un bon exemple de code pour une infobulle en Javascript... c'est incontournable si tu veux que ça marche avec plusieurs navigateurs (et là encore, ça n'est pas de la tarte !)