Une bulle d’aide en CSS
Plutôt que de surcharger les pages d’explications, une petite bulle d’aide en CSS discrète est souvent bienvenue.
Celle que je propose ici est légère, s’active au survol de la souris, et présente l’avantage de pouvoir incorporer des mises en forme HTML (gras, retour à la ligne, etc.)
La bulle d’aide en CSS
Elle se positionne sur une petite image de votre choix, que je nomme dans mon exemple « pic_aide.png », et je la dépose sur le serveur dans le dossier « image »
Quelques exemples :
Le code HTML
<a class="infobulle">
<img src="image/pic_aide.png" alt=" ? " />
<span>Ici je peux mettre tout mon texte d'aide<br />
avec des mots en <strong>gras</strong> par exemple.</span>
</a>
Le texte d’aide (et sa mise en forme HTML) est à mettre entre les balises <span> et </span>
Le CSS
/* Info-bulle */
.infobulle {
text-decoration:none;
position:relative;
}
.infobulle span {
display:none;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:black;
background-color: #eff1f3;
font-size:10px;
font-style:italic;
}
.infobulle span img {
float:left;
margin:0px 8px 8px 0;
}
.infobulle:hover span
{
display:block;
position:absolute;
top:0;
left:0;
z-index:1000;
width:250px;
/* max-width:200px; */
min-height:20px;
border:1px solid black;
margin-top:12px;
margin-left:32px;
overflow:hidden;
padding:8px;
}
(hautement personnalisable, à votre convenance !)
Le résultat
Je viens de tester votre code …. Merci Le paramétrage parait bien je compte l’utiliser bientôt