Discussion :

[nico44530]

Bonjour,

Je crois que tout est dans le titre :
Dans mon lien, j'utilise l'attribut "data-tooltip" mon lien à une class="tooltip".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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
 
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;
}

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

Merci d'avance pour vos réponses

[Torgar]

Bonjour,

Tu dis que c'est décalé, mais pas comment ça devrait être.

Je suppose que tes infobulles apparaissent tout en haut de la page au lieu d'au-dessous de l'image ? (En tout cas en testant simplement ton code c'est ce qui se passe chez moi.

Fixe voir l'élément parent à tes liens avec position: relative; pour voir si ça change quelque chose.