Infobulle (Popup) en CSS

Publié le par PêUR

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: 

 

Publié dans CSS

Commenter cet article

Flaky 22/03/2007

Problème résolu. ^^ Merci de votre aide.

syosyo 25/03/2007

j'ai utilisé cette astuce ; mon probleme maintenant est que l'info bulle se positionne en ajout 'transparent' sur la page initiale. Meme si je mets une couleur de fond, ou si j'essaie de jouer avec le 'z-index' mon texte initial n'est pas recouvert
Qlq'un a-t-il une solution ?
Merci de votre aide

bruno 26/03/2007

Ca fonctionne à merveille.
Et en plus, d'une simplicité.
Merci beaucoup.

syosyo 28/03/2007

pour mon pb d'info bulle ne recouvrant pas le texte de la page en-dessous.

je vais essayer de donner plus de détails sur mon pb car,
en fait je n'ai pas encore mis mon site en ligne; je travaille en local avec easyPhp et IE.

Mon info-bulle a bien une couleur de fond et le texte de mon info bulle s'affiche bien; le pb est que l'on dirait qu'elle est pourtant 'transparente' car le texte de la page (en dessous, en profondeur, dans la dimension z) s'affiche toujours ou plutot n'est pas masqué;
j'ai eu beau joué avec les z-index de la classe info; cela n'y fait rien

Suis-je assez clairedans la description de mon pb ?

Merci

kloh 23/04/2007

Je cherchais une astuce pour mettre une info-bulle sur le champs d'un formulaire, je tombe sur ta page et même si ça ne concerne pas directement je test, et ça marche nikel!
Merci ;)