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

kloh 23/04/2007 10:32

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 ;)

PêUR 23/04/2007 17:41

:)

syosyo 28/03/2007 15:51

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

PêUR 13/04/2007 12:22

Mets ton test en ligne pour que je puisse te dépanner.

bruno 26/03/2007 12:02

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

PêUR 13/04/2007 12:21

:)

syosyo 25/03/2007 18:11

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

PêUR 26/03/2007 09:40

L'adresse de ton blog/site permettrait d'aller y jetter un coup d'oeil.

Flaky 22/03/2007 20:09

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

PêUR 22/03/2007 20:44

:)