Infobulle : Flèche qui se décale avec Firefox

Bonjour,

Je crois que tout est dans le titre. Je vous explique :

Dans mon lien, j'utilise l'attribut "data-tooltip" mon lien à une class="tooltip".

<a href="index.php" class="tooltip" data-tooltip="Accueil"><img src="images/home.png" alt="" /></a>

Le problème est dans le CSS :

J'utilise une flèche vers le bas de mon tooltip qui se décale avec Firefox, mais pas avec Chrome, ou IE.

a.tooltip {
	text-decoration: none;
}
a.tooltip:after {
	content: attr(data-tooltip);
	background: url(../images/bg_tooltip.png) repeat-x;
	border: 1px solid #333;
	border-radius: 3px;
	top: -22px;
	padding: 3px 5px 4px 5px;
	position: absolute;
	color: #fff;
	white-space: nowrap;
	display: none;
	z-index: 2;
}
a.tooltip:before {
	content: "";
	background: url(../images/top_tooltip.png); /* La flèche de mon tooltip */
	position: absolute;
	display: none;
        top: -2px;
        left: 39%;
        height: 6px;
        width: 9px;
	z-index: 5;
}
a.tooltip:hover:after, a.tooltip:hover:before {
    display: block;
}

Vous pouvez vous même tester :

- Lien de l'image bg_tooltip.png : Voir l'image
- Lien de l'image top_tooltip.png : Voir l'image

J'ai utilisé nombreuses solutions trouvées sur Google, mais aucune ne fonctionne.
Et je n'ai pas envie d'utiliser un hack, c'est pas très propre si le navigateur évolue.

Merci d'avance pour vos réponses
Modifié par nico44530 (19 Sep 2012 - 03:21)