Info-bulle sous le curseur

**popo** · 06/07/2009, 14h03

Bonjour,

J'ai une question par rapport au tutoriel de Rodrigue Hunel concernant les infos-bulles.
J'aimerai pouvoir placer l'infobulle sous le lien (avec ce tuto, il reste collé à gauche)

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
32
#corps a.info_bulle span
{
display : none;
}
 
#corps a.info_bulle
{
color : white; 
text-decoration : none;
position:relative;
}
 
#corps a.info_bulle:hover span
{
display : block;
position : absolute;
padding : 6px; /* Définition des marges intérieures */
width : 100px;
color : #000011; 
text-align : justify; /* Justification du texte */
cursor : default; 
}
 
#corps a.info_bulle:hover
{
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
}
 
#corps a.info_bulle:hover span img
{
width:100%; 
}

Code :

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

<a href="****.php" class="info_bulle">TEST<span><img src="test.png" alt="TEST"/></span></a>

**Macmillenium** · 10/07/2009, 13h18

Bonjour,

Un top ou margin-top sur #corps a.info_bulle:hover span fera l'affaire.

**popo** · 11/07/2009, 13h04

Envoyé par Macmillenium

Bonjour,

Un top ou margin-top sur #corps a.info_bulle:hover span fera l'affaire.

le margin-top donnera exactement le même résultat, à savoir que l'image sera placée à n px en dessous du lien mais, elle restera collée à gauche.

Ce que je voudrais c'est qu'elle vienne se placer exactement sous le curseur ou au pire sous le lien.
J'ai posté cette question sur le forum CSS parce que je sais le faire avec du javascript mais que je ne veux pas que ce comportement sois dépendant des préférences de l'utilisateur.

Si cela, n'est pas possible avec uniquement du css, ce n'est pas bien grave, je peux toujours la placer à un autre endroit mais la placer sous le curseur ou le lien sera est petit plus appréciable pour moi.

Merci de t'être penché sur mon problème