28234 sujets

CSS et mise en forme, CSS3

Aide sur la création d'une infobulle

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.. Smiley smile

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

Voici le code : 

<!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>
Administrateur
Hello,
JulienJulien a écrit :
J'essaye de développer une infobulle HTML5/CSS

Alors ça commence mal puisque tu déclares un Doctype XHTML 1.0 et que ton HTML/CSS est parsemé de vieilleries interdites en HTML5/CSS3 Smiley cligne

Le reste de ton code est très très fouilli (sérieusement, des "<br><br><br><br><br><br><br><br><br><br><br>" ?!), ce qui ne donne vraiment pas très envie de se dépatouiller avec tout ça Smiley ohwell

Le pire étant le choix du <table>, sans doute le moyen le moins simple pour atteindre ton objectif.

Pour le positionnement de l'infobulle, je peux te montrer une version simplifiée qui fonctionne : http://codepen.io/raphaelgoetter/pen/KwzerV?editors=1100

N'hésite pas à décortiquer le code et à l'adapter.

Bonne chance Smiley smile
Hola,

Merci beaucoup ta réponse.
Et oui, je sais, le code n'est pas très propre pour le moment mais il s'agit d'un brouillon sur lequel je cale peu à peu mes éléments... je débute hein Smiley smile

J'ai quasiment réussi à obtenir ce je souhaitais mais maintenant, j'aimerais savoir comment je peux arriver à positionner le tooltip sur le lien qui fait appel au trigger, car lorsque je place du texte en dessous, la bulle se décale... une idée? 

<!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">
<link href="css/style.css" rel="stylesheet" type="text/css">
<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>
JulienJulien a écrit :
J'ai quasiment réussi à obtenir ce je souhaitais mais maintenant, j'aimerais savoir comment je peux arriver à positionner le tooltip sur le lien qui fait appel au trigger, car lorsque je place du texte en dessous, la bulle se décale... une idée?

Oui : il faut mettre l'infobule DANS le lien qui, du coup, sera un élément parent. Puis placer une 'position:relative' sur cet élément parent, et une 'position:absolute' sur l'infobule qui, donc, est l'élément enfant. Il n'y a ensuite plus qu'à la positionner de manière plus fine avec des 'top' et des 'left'.
Sujet clos
Aller à