Infobulle en CSS

Version imprimable

Infobulle en CSS

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:

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:

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.

09/04/2009, 14h14
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.
09/04/2009, 14h28
Anium

Et sous IE7 et 8, ça devrait pourtant marcher ? Non ?
09/04/2009, 14h33
Macmillenium

Bonjour,

Citation:

Envoyé par Anium

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

Oui pas de problème avec IE7+
09/04/2009, 14h39
Anium

Pourtant, je n'ai aucun affichage avec mon code cité plus haut sous IE7 et +.
09/04/2009, 15h01
_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 !)
09/04/2009, 15h21
Anium

J'ai bien trouvé quelque chose en javascript en utilisant les événements mouseover et mouseout.

Mais, comme j'affiche mon infobulle sur un select, lorsqu'il est déplié, et que la souris parcourt les options, l'infobulle disparait. J'aimerais qu'elle reste affiché à droite du select tant que le select est "utilisé" (aucun problème sous firefox).

Avec le CSS, ça marche bien sauf sous IE toutes versions..