Jeudi 5 janvier 4 05 /01 /Jan 00:00
Mise à jour le 14/05/2007 00:25

Cet article est obsolète, courrez voir: Infobulle en css (2) - CSS tooltips

Traditionnellement pour créer une infobulle personnalisée on utilise le javascript. Pour les blogmestres matériellement limités (Utilisateurs d'Over-Blog en mode confiance) vous allez pouvoir, grâce à cet article créer des infobulles en CSS.

Exemple

En plaçant le curseur de votre souris sur le mot souligné en pointillé vous verrez apparaître une infobulle en CSSCascading Style Sheets : feuilles de style en cascade.

Si vous ne voyez pas les infobulles s'afficher pensez à actualiser le cache de votre navigateur: Ctrl + F5

Comment faire

Pour obtenir ce résultat vous devez procéder en 2 ètapes:

CSS

a.info {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none; 
  font-weight: bold;
}
a:hover.info {
  text-decoration: none;
  background: none;
}
a.info span {display: none;}
a:hover.info span {
  display: inline;
  position: absolute; 
  top:1.5em;
  left:0.5em;
  z-index: 20;

  background: #446D87;
  color: #fff;
  border:1px solid #000;
  width:150px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}

  • La deuxième, dans vos articles, chaque fois que vous voulez insérer une infobulle à un mot ou une expression, il suffit de mettre le code suivant en mode source:

HTML

<a href="#" class="info">texte<span>définition dans infobulle</span></a>

Aller plus loin...

Bien entendu vous pouvez modifier la couleur de fond de l'infobulle, sa taille, la police, sa couleur, la taille des caractères et même l'appliquer à une image (voir les commentaires)... J'ai mis dans le CSS, à cet effet, beaucoup de propriétés non obligatoires. Seules les propriétés en gras le sont.

 

Références: 

 

Voir les 0 commentaires Publié dans : CSS
Retour à l'accueil
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés