Comment positionner une infobulle en position prédéfinie?

**idamarco** · 16/02/2009, 01h03

Bonjour à tous,

Après moult recherche sur le net concernant les infobulles, j'ai trouvé sur developpez.com (ici) une infobulle en CSS très complète.

Je suis en train de l'adapter à mes besoins à savoir une grande infobulle (500x500)
Dans cette optique, il faut que l'infobulle se positionne à une position prédéfinie faute de quoi 9 fois sur 10 elle sortira de l'écran...
J'ai bidouillé de partout pour trouver la solution, je n'y arrive pas.
Quelqu'un peut il m'aider?
Il s'agirait par exemple de définir une position YX pour l'infobulle quelque soit la position du lien qui l'appelle...
Une position relative à l'écran et non relative à la position de la souris.

Merci por votre aide.

Voici le code:

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
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
p
{
  font-size       : 1.1em; /* Définition de la taille de la police de nos paragraphes */
}
 
a.info_bulle
{				
  color           : #2F368A;
 
  text-decoration : none; 
 
  padding         : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
 
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
 
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */ 
}  
 
a.info_bulle:hover 
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
} 
 
/* Rend invisible tout notre bloc span */
a.info_bulle span.info_bulle 
{								   
  position   :  absolute;
  top        :  -2000em;
  left       :  -2000em;
  width      :  1px;
  height     :  1px;
  overflow   :  hidden; 
} 
 
/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
{
  top        :  auto;
  left       :  auto;
  width      :  507px;
  height     :  auto;
  overflow   :  visible;
} 
 
span.header
{
   display         : block; 
   height          : 45px;  /* Hauteur correspondant à celle de notre image. ----MODIFICATION 35=>45---- */
   line-height     : 220%;  /* Propriété qui centrera le texte verticalement */
   text-align      : center;
   background      : transparent url('./images/css/bulle_societes/top.gif') no-repeat 0 0; 
   font-size       : 15px; 
   font-weight     : bold;
} 
 
span.content
{
   display     : block; 
   height      : 396px;  /* Hauteur correspondant à celle de notre image. ----LIGNE RAJOUTEE---- */
   background  : transparent url('./images/css/bulle_societes/centre.gif') repeat-y;
   padding     : 0 8px;
} 
 
span.footer
{
   display     : block; 
   height      : 48px; /* ----MODIFICATION 5=>48px ----- */
   background  : url('./images/css/bulle_societes/bot.gif') no-repeat bottom left; 
   font-size   : 0; /* Corrige l'espacement inutile sous IE */
}

**Macmillenium** · 16/02/2009, 17h43

Bonjour,

Essai en créant un autre bloc référent qui englobera l'ensemble de la page :

Code xhtml+css :

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Info-bulle personnalisée</title>
	<style type="text/css">
	@charset "iso-8859-1";
 
	.global{ 
		position:relative;
	}
 
	p
	{
	  font-size       : 1.1em; /* Définition de la taille de la police de nos paragraphes */
	}
 
	a.info_bulle
	{				
	  color           : #2F368A;
 
	  text-decoration : none; 
 
	  padding         : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
 
	  /* Définition de l'arrière plan de notre lien */
	  background      : transparent url('http://r-hunel.developpez.com/tutoriels/css/info-bulle/fichiers/comment.gif') no-repeat right center;
 
	  /* position        : relative; */ /* Le référent est maintenant global */
	}  
 
	a.info_bulle:hover 
	{
	  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
	} 
 
	/* Rend invisible tout notre bloc span */
	a.info_bulle span.info_bulle 
	{								   
	  position   :  absolute;
	  top        :  -2000em;
	  left       :  -2000em;
	  width      :  1px;
	  height     :  1px;
	  overflow   :  hidden; 
	} 
 
	/* Rend visible tout notre bloc span et lui attribue une taille */
	a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
	{
	  width      :  500px;
	  left       :  50%;
	  margin-left: -250px;
	  height     :  500px;
	  top:50%;
	  margin-top:-250px;
	  overflow   :  visible;
	  background : red;
	}  
 
	</style>
</head>
<body>
	<div class="global">
		<h3>Exemple d'info-bulle textuelle dans un paragraphe</h3>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
			veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
			commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
			velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
			occaecat cupidatat non proident, sunt in culpa qui officia deserunt
			mollit anim id est laborum.
		</p>
 
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
			veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
			commodo consequat. 
			<a class="info_bulle" href="http://www.developpez.com/">developpez.com
	  			<span class="info_bulle">
	    			<span class="header">Détails sur developpez.com</span>
	    			<span class="content">
						www.developpez.com est la communauté en langue française qui concentre le
					    plus de développeurs professionnels avec plus de 130 000 visites par jour.
					</span>
					<span class="footer">&nbsp;</span>
				</span>
 
			</a> 
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
			eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
			culpa qui officia deserunt mollit anim id est laborum.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
			veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
			commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
			velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
			occaecat cupidatat non proident, sunt in culpa qui officia deserunt
			mollit anim id est laborum.
		</p>
	</div>
</body>	 
</html>

**idamarco** · 16/02/2009, 21h24

Bonjour Macmillenium,

Merci pour ta réponse.
Toutefois, je rencontre toujours le même problème.
A savoir que j'ai rajouté plusieurs lignes de <BR> de façon à voir ce qu'il se passait dans le cas d'une page nécessitant l'ascenseur.
Dans ce cas, la bulle sort de l'écran.
Ce qui laisse penser (car je ne suis pas un pro pour tout décrypter facilement) que la position est relative à la taille de la page et non de l'écran...
Et c'est la tout mon problème.
Dans mon cas, il faut que la bulle se positionne par rapport à l'écran affiché se qui garantira que la bulle ne sort pas de l'écran.

Est-ce faisable en CSS ou cela nécessite t il du javascript?

**GihefBey** · 16/02/2009, 22h19

Bonjour,

Tu ne peux pas récupérer la taile de quoi que ce soit par CSS.
Javascript le permet.

Quelques exemples (payants).

J'ai déjà utilisé celles de Laurent Jouanneau ou celles de
walterzorn sans que ça sorte de la page.

-

**idamarco** · 18/02/2009, 01h08

Salut Gihefbey,

Et merci pour les tuyaux.
J'ai été voir tes liens.
Walterzorn ne propose pas d'exemple dans son zip...
Pas facile alors pour moi d'arriver à mes fins.

J'ai vu également Overlib qui a l'air pas mal, mais là aussi, pas d'exemple.

Je teste actuellement le tooltip de http://www.dyn-web.com/code/tooltips/

Le connais tu?

**GihefBey** · 18/02/2009, 14h58

Non, je ne connais pas. Mais, à les voir fonctionner, ça a l'air nickel.
Je conserve le lien.

Ce qui m'avais intéressé dans celles que j'ai testées, c'est que je pouvais y afficher HTML par CSS.

-

**idamarco** · 18/02/2009, 15h03

Bien,
Comme je passe du css au javascript pour ma bulle, je clos la discussion.
Toutefois, pour ceux que cela interesse, j'ai un petit problème avec l'infobulle de walterzorn.
Il est exposé ici.

Comment positionner une infobulle en position prédéfinie?

Positionnement en CSS

Discussions similaires

Partager

Partager