[Résolu]Background d'un tooltip au-dessous d'un texte

Bonjour, voici mon premier post après avoir longtemps consulté anonymement le site Après plusieurs recherches je n'ai pas trouvé de réponse, je prend donc le temps d'écrire ce sujet.

Voila mon problème, j'ai une liste d'utilisateurs, et j'utilise du javascript pour afficher un "tooltip" au survol d'une image de cette liste (j'utilise mootools pour gagner du temps)
Voila le div de la liste pour être un peu plus clair :

			<ul id="equipe_faces">
			        <li id="eq01"><img src="images/equipe/01.jpg" alt="" /><div class="tooltip"><h3>Employe 1</h3><p>Fonction</p></div></li>
			        <li id="eq02"><img src="images/equipe/02.jpg" alt="" /><div class="tooltip"><h3>Employe 2</h3><p>Fonction</p></div></li>
			        <li id="eq03"><img src="images/equipe/03.jpg" alt="" /><div class="tooltip"><h3>Employé 3</h3><p>Gérant - Commercial</p></div></li>
			        <li id="eq04"><img src="images/equipe/04.jpg" alt="" /><div class="tooltip"><h3>Employe 4</h3><p>Fonction</p></div></li>
			        <li id="eq05"><img src="images/equipe/05.jpg" alt="" /><div class="tooltip"><h3>Employe 5</h3><p>Fonction</p></div></li>
			        <li id="eq06"><img src="images/equipe/06.jpg" alt="" /><div class="tooltip"><h3>Employe 6</h3><p>Fonction</p></div></li>
			        <li id="eq07"><img src="images/equipe/07.jpg" alt="" /><div class="tooltip"><h3>Employe 7</h3><p>Fonction</p></div></li>
			        <li id="eq08"><img src="images/equipe/08.jpg" alt="" /><div class="tooltip"><h3>Employe 8</h3><p>Fonction</p></div></li>
			        <li id="eq09"><img src="images/equipe/09.jpg" alt="" /><div class="tooltip"><h3>Employe 9</h3><p>Fonction</p></div></li>
			</ul>

Ainsi donc, je cache les div qui ont la classe tooltip, et en javascript je les affiche quand la souris se retrouve au dessus de la balise img. Pour cela je joue sur l'attribut display, none ou block.

Aucun problème avec le javascript, par contre, si sous firefox cela marche sans problèmes, il y a un problème avec ie6 (non testé sous ie7).

Voila le css de la classe tooltip :

.tooltip {
	position: absolute;
	height: 78px;
	width: 216px;
	background:url(img/tooltip.gif) top left no-repeat transparent;
	display: none;
	z-index: 20;
}
.tooltip h3 {
	padding-top: 28px;
	padding-left: 20px;
	position: relative;
}
.tooltip p {
	padding-left: 20px;
	position: relative;
}

Mon image de background a donc la forme d'une infobulle.
Le problème est que sous ie, cette image s'affiche sous le texte qui est présent dans un autre div plus loin dans la page (qui est placé en float: right et est donc à droite de la liste).

N'étant sûrement pas clair je joint une capture du problème :
(snip)

Ce n'est pas un problème lié à javascript puisque en désactivant celui-ci et en affichant toutes les infobulles le problème est toujours la. On peut voir sur l'image que le texte est bien au-dessus mais le background est au-dessous du texte de droite (vérifié avec un background rouge).

J'ai essayé de corriger le problème avec un z-index mais cela ne corrige rien pour le background.

Le reste du html est valide ainsi que le css (je ne fournit pas tout ici ayant la flemme de "nettoyer" les marques utilisees )

Merci d'avance !
Modifié par Skateinmars (15 Aug 2007 - 23:31)

Evidemment après avoir galéré plusieurs jours je trouve la solution quelques temps après avoir posté un sujet

Il suffit donc de mettre le html de la zone ou se trouve les tooltips après celui de la zone de texte, et il se retrouvera au-dessus.
C'est bête mais ca marche !

Salut, et félicitations.

Tu considères que ce sujet est [Résolu] ?

Oups, en effet désolé