Pour ajouter des infos-bulles dans un texte

Le code de base (qui peut être modifié, personnalisé)

Passez la souris sur les mots en violet pour voir les explications

La partie CSS, expliquée avec des info-bulles 


a.bulle { 
position:relative;
color couleur du mot sélectionné dans la phrase:#C800F0;
text-decoration:none pas de décoration: le mot qui déclenche 
une info-bulle n'est pas souligné;
font-family police du mot dans la phrase:arial, verdana, sans-serif;
text-align:center;
}

a.bulle:hover {
background: none Quand je sélectionne le mot,
 il n'est pas surligné.;
z-index: 50;
}

a.bulle span {
display: none;
}

a.bulle:hover span toutes ces informations définissent 
 la place, la couleur, la taille et le contenu de la bulle {
display: block;
position: absolute La position de la bulle est fixée par rapport 
au mot (voir au dessous);
top: -40px position verticale de la bulle: 
nombre négatif: bulle au dessus du mot. 
 Nombre positif: bulle sous le mot. ; 
left: 0px position horizontale de la bulle; 
négatif: bulle à gauche, positif: bulle à droite; 
font-family choix de la police dans la bulle:arial, verdana, sans-serif;
text-align:left Dans la bulle, le texte est à gauche. 
 Je peux choisir "center", surtout pour une image.;
font-size:17px;
color couleur de la police (si je ne mets rien, la police de la bulle 
sera de la même couleur que le mot-lien: en violet) :#0CBFA7;
font-weight épaisseur du mot: gras (bold), fin (lighter) ou normal:normal Dans la bulle, les mots ne sont pas en gras.;
width largeur de la bulle: pas obligatoire:200px;
background couleur de fond de la bulle: white;
padding espace entre le bord de la bulle et le contenu: 5px;
border: #62c0f4 solid 1px  le cadre de la bulle: la couleur et l'épaisseur du trait;
text-indent: 0;
}

La partie html

  1. Info-bulle avec du texte:

    2. La terre de Sicile tremblait et d'énormes fissures déchirures, fentes apparaissaient.

    Le code html:
    La terre de Sicile tremblait et d'énormes <a href="#/" class="bulle"> fissures <span> déchirures, fentes </span> </a> apparaissaient.

  2. Info-bulle avec une imagePour une image, je change la position de la bulle: 
    a.bulle:hover span {
display: block;
position: absolute;
top: -40px; 
left: 0px;


    a.bulle-image:hover span {
      display: block;
      position: absolute;
      top: -160px;
      left: -60px;
    :

    3. La terre de Sicile tremblait et d'énormes fissures fissure apparaissaient.

    Le code html:
    La terre de Sicile tremblait et d'énormes <a href="#/" class="bulle-image"> fissures <span> <img src="images/fissures.jpg" alt="fissure"> </span> </a> apparaissaient.

  3. Info-bulle avec une vidéo 
    a.bulle-video:hover span {
 display: block;
 position: absolute;
 top: -120px;
 left: -10px;
    comme pour l'info-bulle en image, je change la position de la bulle dans la partie CSS    :

    4. La terre de Sicile tremblait et d'énormes fissures apparaissaient.

    Le code html:
    La terre de Sicile tremblait et d'énormes <a href="#/" class="bulle-video">fissures

    <span> 
     <video width="160" height="120" 
     onmouseover Je choisis la vidéo qui se déclenche au passage de la souris="this.play()" onmouseout="this.pause()" 
     autobuffer="true" >
    <source src="video/breche.mp4" type="video/mp4" />
    <source src="video/breche.webm" type="video/webm" />
    </video> 
    </span></a>
    apparaissaient.

Quelques exemples de modifications du code CSS

Pour les artistes : le code CSS

Pour faire une bulle ovale avec une taille fixe. 


a.bulle-ovale Je n'oublie pas de nommer différemment ma bulle { 
position:relative;
color:#C800F0;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
}

a.bulle-ovale:hover {
background: none;
z-index: 50;
}

a.bulle-ovale span {
display: none;
}

a.bulle-ovale:hover span {
display: block;
position: absolute;
top: -100px; 
left: -10px;  je modifie la position de ma bulle
font-family:chalkboard,verdana, sans-serif;
text-align:center; pour que le texte ne sorte pas de la bulle, je le place au centre (et pas à gauche)
font-size:17px;
color:#F9EC00;
font-weight:normal;
background je rajoute une couleur de fond: #A2B6F1;
padding: 5px;
width je fais d'abord un rectangle:j'indique la largeur: 150px;
height puis je choisis une hauteur: 75px;
border-style: 1;
    -webkit-border-radius: 75px / 40px; 
    -moz-border-radius:    75px / 40px; 
    border-radius ensuite j'arrondis mon rectangle pour former un ovale:         75 arrondi horizontalpx / 40 arrondi verticalpx; 
    box-shadow je définis la forme de l'ombre:20ombre à droitepx 20ombre vers le baspx 10 le degradé (l'épaisseur) px #182856 la couleur de l'ombre;
    border le bord de l'ovale: couleur et épaisseur:#0843EF solid 1px;
text-indent: 0;
}

Le résultat

  1. Je veux une bulle en forme d'ovale
    voici le résultat     avec une ombre sur le bas.
  2. Je veux une bulle rectangulaire La voici avec des ombres.

    3. Partie du code CSS modifié: 

    
   a.bulle-rectangle:hover span {
(...)
text-align:left;
font-size:17px;
color:#F9EC00;
font-weight:normal;
background: #A2B6F1;
padding: 5px;
width: 150px;
    height: 75px;
     box-shadow:10px 15px 10px #182856;
    border:#0843EF solid 1px;
text-indent: 0;
}

  3. Je veux une bulle ronde
    avec des ombres.

    4. Partie du code CSS modifié: 

    
   a.bulle-ronde:hover span {
(...)
text-align:center;
font-size:17px;
color:#F9EC00;
font-weight:normal;
background: white;
padding: 5px;
width: 100px;
    height: 100px;
border-style: 1;
    -webkit-border-radius: 50px / 50px; 
    -moz-border-radius:    50px / 50px; 
    border-radius:         50px / 50px; 
    box-shadow:10px 10px 20px #F9EC00;
    border:#F9EC00 solid 1px;
text-indent: 0;
}