Position d'un tooltip en CSS

Version imprimable

Bonjour,

J'ai une tooltip qui se positionne parfaitement pour les div (image) qui font 32px par 32px.
Si un div fait 16x16, la tooltip se décale vers le haut.

Un positionnement avec le javascript est peut être mieux ?

Exemple : Copier-coller ce code dans le bloc-note ou notepad, et enregistrer en essai.html
Ensuite voyez le problème par vous-même :(

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<html>
<head>
<style type="text/css">
body { background-color: #bbb; text-align: center;
font-family: tahoma; }
.container { margin: 0 auto; width: 1000px; }
img{
background-color: #eee;
border: 1px solid #fff;}
h1 { font-size: 20px;}
a.tooltip {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
.tooltip span.tooltip {
	background: url(http://www.web-astronomie.fr/images/bg-tooltip.png) repeat-x;
	border: 1px solid #333;
	visibility: hidden;
	position: absolute;
	white-space: nowrap;
	color: #fff;
	font-size: 11px;
	bottom: 45px;
	left: -5px;
	height: 17px;
	line-height: 15px;
	padding: 4px 7px;
	-moz-border-radius: 3px;
}
.tooltip:hover span.tooltip {
	visibility: visible;
}
.tooltip:hover span.tooltip span.arrow {
	background: url(http://www.web-astronomie.fr/images/top-tooltip.png) no-repeat; /* Flèche */
	display: block;
	position: absolute;
	width: 9px;
	height: 6px;
	top: 23px;
	left: 16px;
	border: 0;
}
td a {
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Survolez les deux images</h1><br /><br />
<table>
	<tr>
		<td>
			<a href="#" class="tooltip">
			<img src="http://www.web-astronomie.fr/images/fonction01.png" alt="" />
			<span class="tooltip"><span class="arrow"></span>Créez votre propre blog</span>
			</a>
		</td>
		<td>
			<a href="#" class="tooltip">
			<img src="http://www.web-astronomie.fr/images/fonction01-16x16.png" alt="" />
			<span class="tooltip"><span class="arrow"></span>Créez votre propre blog</span>
			</a>
		</td>
	</tr>
</table>
<p>La tooltip ne s'ajuste pas automatiquement à la hauteur de l'image.</p>
<p>Elle est automatiquement réglée à la hauteur : bottom: 45px;<br />
<p>J'aimerais que la tooltip s'ajuste à la hauteur de l'image<br />
Voir l'image ci-dessous :</p>
<img style="border:0; display: block;margin: 0 455px;" src="http://www.web-astronomie.fr/images/image.png" alt="" />
</div>
</body>
</html>

Merci d'avances pour vos réponses

Dans ton cas, il y a peut-être des choses à faire avec l'attribut data-tooltip.
data-tooltip permet de réaliser une info-bulle que l'on peut mettre en forme, tout en ayant un code propre et sémantiquement pertinent.

Je n'ai pas réutilisé ton code car ça m'était difficile, mais mon exemple correspond à ton problème.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>data-tooltip</title>
<style type="text/css">
 
body {
text-align: center;
}
section {
display: inline-block;
position: relative; /* pour placer la tooltip selon section */
margin: 1em;
}
div {
background-color: gray;
border: thin solid black;
}
#boite-100 {
width: 100px;
height: 100px;
}
#boite-200 {
width: 200px;
height: 200px;
}
div:hover::after {      /* placé après la div survolée*/
content: attr(data-tooltip); /* contenu de l'attribut data-tooltip */
z-index: 2;             /* passe au-dessus des autres éléments */
background-color: yellow;
border: thin solid black;
-moz-border-radius: 0 5px 5px 5px;
-o-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
padding: 0.5ex;
position: absolute;     /* placé selon le parent de la div */
top: 105%;
left: 90%;
min-width: 10ex; /* minimum 10 caractères de large */
}
 
</style>
</head>
 
<body>
 
	<h1>data-tooltip</h1>
 
	<section>
		<div id="boite-100" data-tooltip="Boite 100">100 px</div>
	</section>
 
	<section>
		<div id="boite-200" data-tooltip="Boite 200">200 px</div></body>
	</section>
</body>
</html>

Notez que l'on pourrait tout aussi bien mettre title en forme, mais le navigateur proposerait aussi sa version. On se retrouverait alors avec deux versions de title !

20/10/2012, 02h40
nico44530

Re

Cette méthode n'est pas compatible par IE8 et IE7
J'aimerais justement que ce soit compatible avec tous les navigateurs récents

As tu une autre solution ?

Exemple avec Facebook, comment font-il pour que le data-hover fonctionne avec IE8 et 7 ?
20/10/2012, 12h11
NoSmoking
Bonjour,
as tu essayé
Code:

1 2 /* bottom: 45px;/* SUPPRESSION */ top:-30px;
sur la class tooltip span.tooltip
20/10/2012, 16h11
nico44530

Re

Ca marche bien avec la méthode de NoSmoking.
Mais la flèche de la tooltip de se place pas bien au milieu.
Il reste avec un left de 16px, donc la flèche est décaler sur la petite image :?
20/10/2012, 17h15
nico44530

Résolu

Problème résolu

Merci beaucoup :)