Aide sur la création d'une infobulle

**bajoe** · 18/05/2016, 15h54

Bonjour à tous,

J'essaye de développer une infobulle HTML5/CSS mais je me retrouve confronté à deux problématiques :

1. je n'arrive pas à bien positionner à tous les coups l'infobulle au dessus du texte qui déclenche son apparition

2. je ne trouve pas comment faire pour qu'elle puisse s'afficher au-dessus ou en-dessous selon si il y a de l'espace au dessus ou pas, et que l'appendice (ce qui fait le lien entre la bulle et le texte) soit repositionné également

PS : le code HTML de l'infobulle fait appel à des tables, car je ne savais pas comment me débrouiller correctement pour avoir la pagination que je souhaitais avec des div..

Merci encore à vous pour vos lumières !!!

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
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
*
<style type='text/css'>
*
body {
****height: 100%;
****margin: 0;
****position: absolute;
****width: 100%;
****background: #063d4c;
****overflow: hidden;
*
****-webkit-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.7);
****-moz-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.7);
****box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.7);
}
*
.container {
****width: 500px;
****height: 201px;
****margin: 200px auto;
}
*
.container #tooltip {
****position: relative;
****width: 450px;
****height: 200px;
****background: #ffffff;
****margin-bottom: 20px;
****left: 10px;
****top: -160px;
****opacity: 0;
****visibility: hidden;
*
****-webkit-transition: all .3s 1s ease;
****-moz-transition: all .3s 1s ease;
****-ms-transition: all .3s 1s ease;
****-o-transition: all .3s 1s ease;
****transition: all .3s 1s ease;
*
****border-radius: 5px;
****-moz-border-radius: 5px;
****-webkit-border-radius: 5px;
*
****box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
****-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
****-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
}
*
.container #tooltip .avatar {
*
****margin: 5px 15px 5px 5px;
****position: relative;
****width: 60px;
****height: auto;
****border: 0px;
****border-radius: 6px;
****-moz-border-radius: 6px;
****-webkit-border-radius: 6px;
****float:left;
}
*
.container #tooltip .info h2 {
****color: black;
****font: bold 17px/34px Arial;
****text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
****margin: 0;
}
*
.container #tooltip .info p {
****font: 12px/14px Arial, sans-serif;
****color: #aaa;
****margin-top: 0;
}
*
.container #tooltip:after {
****content: '';
****position: absolute;
****bottom: -10px;
****width: 20px;
****height: 20px;
****background: #ffffff;
****left: 40px;
*
****-webkit-transform: rotate(45deg);
****-moz-transform: rotate(45deg);
****-o-transform: rotate(45deg);
****-ms-transform: rotate(45deg);
****transform: rotate(45deg);
*
*
****box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.2);
****-moz-box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.2);
****-webkit-box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.2);
}
*
*
.container {
****color: #aaa;
****font: 13px/18px Arial, sans-serif;
}
*
.container a.trigger, .container a{
****color: white;
****text-decoration: none;
}
*
.container a.trigger:hover ~ #tooltip {
****opacity: 1;
****visibility: visible;
****top: -140px;
*
****-webkit-transition: all .3s ease;
****-moz-transition: all .3s ease;
****-ms-transition: all .3s ease;
****-o-transition: all .3s ease;
****transition: all .3s ease;
}
*
*
.container #tooltip .close {
****position: absolute;
****top: 5px;
****right: 6px;
****font-size: 20px;
****font-weight: bold;
****line-height: 18px;
****color: #000000;
****text-shadow: 0 1px 0 #ffffff;
****opacity: 0.2;
****filter: alpha(opacity=20);
****text-decoration: none;
}
*
.container #tooltip .close:hover {
****color: #000000;
****text-decoration: none;
****opacity: 0.4;
****filter: alpha(opacity=40);
****cursor: pointer;
}
.BulleFortuneClassement {
****font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
****font-size: 11px;
****color: #90949c;
}
.BulleInfosTchatcheur {
****font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
****font-size: 12px;
****color: #90949c;
}
.BulleNomTchatcheur {
****line-height: 1.38;
****font-size: medium;
****font-weight: bold;
****color: #365899;
****font-weight: bold;
****color: #106fb8;
}
.BulleVoirProfil {
****text-align: right;
****font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
****</style>
</head>
***
<body><br><br><br><br><br><br><br><br><br><br><br>
**<div class="container">
*
****Hello <a href="#" class="trigger">World</a>.
****Hover me to see the tooltip!
*
****<div id="tooltip">
************<table width="400" border="0">
<tr>
****<td width="98" rowspan="3">&nbsp;</td>
****<td colspan="2" class="BulleNomTchatcheur">Nom</td>
</tr>
<tr>
****<td width="94" class="BulleFortuneClassement">texte1</td>
****<td width="194" class="BulleFortuneClassement">texte2</td>
</tr>
<tr>
****<td colspan="2">
************<table width="291" border="0">
****************<tr>
********************<td width="25" valign="middle"><img src="images/BulleAmpoule.png" width="20" height="20" alt="" /></td>
********************<td width="256" valign="middle" class="BulleInfosTchatcheur">lorem ipsum dolor sit amet</td>
****************</tr>
****************<tr>
********************<td valign="middle"><img src="images/BulleCashinout.png" width="20" height="20" alt="" /></td>
********************<td valign="middle" class="BulleInfosTchatcheur">lorem ipsum dolor sit amet</td>
****************</tr>
****************<tr>
********************<td valign="middle"><img src="images/BulleBlabla.png" width="20" height="20" /></td>
********************<td valign="middle" class="BulleInfosTchatcheur">lorem ipsum dolor sit amet</td>
****************</tr>
************</table>
****</td>
</tr>
<tr>
****<td colspan="2">&nbsp;</td>
****<td class="BulleVoirProfil">Voir le profil complet</td>
</tr>
</table>
*
**</div>
</body>
***
</html>

Invité · 18/05/2016, 16h16

Bonjour,

Envoyé par bajoe

...pour qu'elle puisse s'afficher au-dessus ou en-dessous selon si il y a de l'espace au dessus ou pas...]

Ca nécessite du JavaScript.

Donc, tant qu'à faire :

Créer des infobulles CSS et JavaScript simplement avec jQuery

Remarque : utiliser une <table> pour de la mise en page est une mauvaise idée.

**bajoe** · 19/05/2016, 14h07

Envoyé par jreaux62

Donc, tant qu'à faire :

Créer des infobulles CSS et JavaScript simplement avec jQuery

Hola et merci beaucoup pour ta réponse.

Excellent lien et exemple.
Sais-tu comment il serait possible d'insérer du code HTML dans les champs aria-label??

Invité · 19/05/2016, 14h11

Bonjour,

"aria-label" (comme tout attribut de balise) n'est pas destiné à recevoir du code HTML (formaté).

Cela dit, dans la démo, un attribut est effectivement utilisé pour afficher du HTML dans l'info-bulle.

Code :

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

<a rel="tooltip" title="ici du code <b>HTML</b> formaté !">.....</a>

C'est une "méthode".
Mais il en existe d'autres, plus conventionnelle (=sans mettre le HTML dans un attribut de balise) !

-> Telle que celle que tu avais commencé à le faire notamment (mais sans <table> ; )

**bajoe** · 19/05/2016, 14h14

Ah mince...

Connaîtrais-tu d'autres tooltip bien foutus (type infobulle facebook) qui permettent de pouvoir afficher du code HTML?

Invité · 19/05/2016, 14h18

Une info-bulle n'est jamais qu'une <div>, en position:absolute;, qu'on affiche au survol d'un élément.

Tu avais bien démarrer, mais recommence avec une info-bulle SIMPLE (sans trop de contenu formaté, <h2>.... que tu pourras ajouter par la suite).

Voici une structure possible :

Code html :

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

1
2
3
4
5
6
<div class="tooltip">
   <a href="#">...............</a>
   <div>
      ici le contenu <b>formaté</b> du l'infobulle !
   </div>
</div>

Qui donne :

Code css :

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

.tooltip >a:hover ~ div {..........}

**bajoe** · 19/05/2016, 14h23

C'est ce que j'ai continué à faire à partir de l'exemple précédent, ça marche bien... sauf que je n'arrive pas à positionner le tooltip sur le lien qui fait appel au trigger, car lorsque je place du texte en dessous (oui, avec des br pour le test :p), la bulle se décale...

une idée?

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
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<style type='text/css'>
 
body {
	height: 100%;
	margin: 0;
    position: absolute;
	width: 100%;
    background: #063d4c;
	overflow: hidden;
 
    -webkit-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.7);
    box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.7);
}
 
.container {
	width: 500px;
	height: 201px;
	margin: 200px auto;
}
 
.container #tooltip {
	position: relative;
	width: auto;;
	height: auto;;
	background: #ffffff;
	margin-bottom: 20px;
	/* left: 10px;
	top: -160px; */
	opacity: 0;
	visibility: hidden;
 
 
	-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
	   -moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
	     -o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
	        transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
 
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
 
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
}
 
.container #tooltip .avatar {
 
	margin: 5px 15px 5px 5px;
	position: relative;
	width: 60px;
	height: auto;
	border: 0px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	float:left;
}
 
.container #tooltip .info h2 {
	color: black;
	font: bold 17px/34px Arial;
	text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
	margin: 0;
}
 
.container #tooltip .info p {
	font: 12px/14px Arial, sans-serif;
	color: #aaa;
	margin-top: 0;
}
 
.container #tooltip:after {
	content: '';
	position: absolute;
	top: -10px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	left: 40px;
	z-index: -1;
 
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg); */
 
 
	box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.2);
}
 
 
.container {
	color: #aaa;
	font: 13px/18px Arial, sans-serif;
}
 
.container a.trigger, .container a{
	color: white;
	text-decoration: none;
}
 
.container a.trigger:hover ~ #tooltip {
	opacity: 1;
	visibility: visible;
	/* top: -140px; */
 
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
 
 
.container #tooltip .close {
	position: absolute;
	top: 5px;
	right: 6px;
	font-size: 20px;
	font-weight: bold;
	line-height: 18px;
	color: #000000;
	text-shadow: 0 1px 0 #ffffff;
	opacity: 0.2;
	filter: alpha(opacity=20);
	text-decoration: none;
}
 
.container #tooltip .close:hover {
	color: #000000;
	text-decoration: none;
	opacity: 0.4;
	filter: alpha(opacity=40);
	cursor: pointer;
}
.BulleFortuneClassement {
	font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size: 11px;
	color: #90949c;
}
.BulleInfosTchatcheur {
	font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size: 12px;
	color: #90949c;
}
.BulleNomTchatcheur {
	line-height: 1.38;
	font-size: medium;
	font-weight: bold;
	color: #365899;
	font-weight: bold;
	color: #106fb8;
}
.BulleVoirProfil {
	text-align: right;
	font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
****</style>
</head>
**
<body><br><br><br><br><br><br><br><br><br><br><br>
  <div class="container">
 
  	Hello <a href="#" class="trigger">World</a>.
  	Hover me to see the tooltip!
		<br><br><br><br>texte en dessous
  	<div id="tooltip">
			<table width="400" border="0">
<tr>
	<td width="98" rowspan="3">&nbsp;</td>
	<td colspan="2" class="BulleNomTchatcheur">Nom</td>
</tr>
<tr>
	<td width="94" class="BulleFortuneClassement">texte1</td>
	<td width="194" class="BulleFortuneClassement">texte2</td>
</tr>
<tr>
	<td colspan="2">
			<table width="291" border="0">
				<tr>
					<td width="25" valign="middle"></td>
					<td width="256" valign="middle" class="BulleInfosTchatcheur">lorem ipsum dolor sit amet</td>
				</tr>
				<tr>
					<td valign="middle"></td>
					<td valign="middle" class="BulleInfosTchatcheur">lorem ipsum dolor sit amet</td>
				</tr>
				<tr>
					<td valign="middle"></td>
					<td valign="middle" class="BulleInfosTchatcheur">lorem ipsum dolor sit amet</td>
				</tr>
			</table>
	</td>
</tr>
<tr>
	<td colspan="2">&nbsp;</td>
	<td class="BulleVoirProfil">Voir le profil complet</td>
</tr>
</table>
 
  </div>
</body>
**
</html>

Invité · 19/05/2016, 14h49

Recommence à zéro, avec un code minimal.

Là, tu as plein de code "décoratif" qui gêne la lecture et le déboguage.

De plus, avec la structure que je t'ai montré, plus besoin de "trigger" ou autre class inutile.

Aide sur la création d'une infobulle

CSS

Discussions similaires

Partager

Partager