picture picture
septembre 22, 2017 CSS 0 Commentaire

Une bulle d’aide en CSS

Plutôt que de surcharger les pages d’explications, une petite bulle d’aide 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

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

No Responses to “Une bulle d’aide en CSS”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: