Aide sur la création d'une infobulle

JulienJulien
Les bases HTML/CSS

Boonjour à 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 : 


<!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>```

4 réponses

Romain Chevallier

Bonjour,

jQuery UI te serai d'une si grande aide va jeté un oeil

F3LENYR

Bonjour, je n'ai sûrement pas bien saisi l'idée mais c'est un tooltip que vous voulez faire ? Comme celui de Bootstrap ou de jQuery UI ?
Si oui vous avez des infos qui peuvent vous aider ici, et ensuite le personnaliser avec un script perso jQuery pour que le tooltip (l'infobulle) apparaisse à l'endroit souhaité.
Après par contre pour le coup je ne m'y connais pas du tout dans le jQuery donc désolé... :/
http://jqueryui.com/tooltip/ ou http://v4-alpha.getbootstrap.com/components/tooltips/

betaWeb

@Romain Chevallier, @F3LENYR il n'y a pas forcément tout le temps besoin de jQuery pour faire ce genre de chose, soit du vanilla JS, soit même du CSS suffisent amplement.

MrCastor

J'aurais opté pour du css avec des positions relatives et absolute sur la bulle :

.ton-btn {
    position: relative;
}
.ta-bulle {
    position: absolute;
    visibility: hidden;
}
.ton-btn:hover .ta-bulle {
    visibility: visible;
    top: ?;
    left: ?;
    etc.
}

Le seul point noir, c'est tes tables... Tu vas avoir du mal à obtenir quelque chose de "parfait" mais en bidouillant un peu, tu devrais t'en sortir. ^^'
Bon courage !