Lorsqu'on veut faire un lien avec une info-bulle ( « tooltip » en anglais), on va utiliser le « title », mais il faut avouer qu'il ne donne pas un rendu très esthétique. Pour changer cela, il faut se passer du title et créer une classe CSS qu'il faudra appeler lorsqu'on en aura besoin.

Voici un exemple de ce qu'on doit faire si nous voulons utiliser le title avec son aspect très classique :

<h1>Tutoriel sur les info-bulles</h1>
<p>Voici des infobulles :
 <a class="link_infobulle" href="https://eridiane.fr" title="mon blog préféré">Eridiane</a>
</p>

Rien de palpitant.

Nous allons commencer par changer l'attribut « title » par  « aria-label » :

<h1>Tutoriel sur les info-bulles</h1>
<p>Voici des infobulles :
  <a class="link_infobulle" href="https://eridiane.fr/" aria-label="mon blog préféré">Eridiane</a>
</p>

La balise « aria-label » va nous permettre de définir une valeur sous forme d'une string. Elle est surtout utilisée sur des éléments interactifs comme un bouton. Cela sera presque le cas ici, notre bouton étant une balise « a » et l'action se fera au survol de la balise.

Maintenant, nous devons indiquer que nous voulons afficher notre « aria-label » lors du survol ainsi que lors du focus. Cela va se faire en CSS grâce à l'attribut « content ». (Ne pas oublier la balise « link » dans le fichier HTML)

.link_infobulle:hover::after,
.link_infobulle:focus::after{
  content: attr(aria-label);
}

La fonction « attr() » est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sûr les pseudo-éléments  auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.
Pour que cela fonctionne, nous devons lui indiquer que le texte s'affiche après le survol ou le focus (Différence entre hover et focus) et sur le dernier pseudo-élément.
Nous obtenons l'affichage du contenu de notre attribut aria-label : c'est un bon début.

Cependant, nous ne voulons pas que notre texte s'affiche après notre lien. Nous devons donc sortir le texte de notre info-bulle du flux classique d'affichage HTML.
Cela se fait grâce à l'attribut « position ».

Le lien sera en position relative et notre texte sera en position absolute :

.link_infobulle:hover::after,
.link_infobulle:focus::after{
  content: attr(aria-label);
  position: absolute;
}

Ok, c'est bien, mais c'est très moche, pire qu'avec la balise « title ». Le CSS va nous aider à y remédier.
On va changer la couleur du fond, la taille et la couleur du texte, mettre une petite ombre et les marges entre les bords et le texte :

.link_infobulle:hover::after,
.link_infobulle:focus::after{
  content: attr(aria-label);
  position: absolute;
  padding: 5px 10px;
  background: #62998e;
  color: #fff;
  border-radius: 5px;
  font-size: 1rem;
  box-shadow: 0 8px 8px -4px rgba(0,0,0,0.20);
}

Et parce que je n'aime pas travailler sur un fond blanc (j'ai les yeux sensibles ? ) :

.html {
  background-color: rgb(128, 128, 128);
}

C'est déjà mieux. Maintenant, nous allons positionner notre info-bulle en haut de notre lien, et nous allons le centrer : 

.link_infobulle:hover::after,
.link_infobulle:focus::after{
  content: attr(aria-label);
  position: absolute;
  padding: 5px 10px;
  background: #62998e;
  color: #fff;
  border-radius: 5px;
  font-size: 1rem;
  box-shadow: 0 8px 8px -4px rgba(0,0,0,0.20);

  top: -2em;
  left: 50%;
  transform: translateX(-50%);
}

Ok, mais pour chaque mot, il y a un retour à la ligne automatique qui gâche tout. On va le supprimer avec l'attribut « white-space » : 


.link_infobulle:hover::after,
.link_infobulle:focus::after{
  content: attr(aria-label);
  position: absolute;
  padding: 5px 10px;
  background: #62998e;
  color: #fff;
  border-radius: 5px;
  font-size: 1rem;
  box-shadow: 0 8px 8px -4px rgba(0,0,0,0.20);

  top: -2em;
  left: 50%;
  transform: translateX(-50%);

  white-space: nowrap;
}


Notre info-bulle est pas mal du tout. Allez, on va encore l'améliorer en plaçant une petite flèche sous notre info-bulle. Pour rajouter un élément avant, nous allons utiliser « hover::before » et nous allons ajuster sa couleur, dimension et emplacement : 

.link_infobulle:hover::before,
.link_infobulle:focus::before {
  content: "▼";
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  color: #62998e;
}

Et pourquoi pas un ombrage avec « bow-shadow » pour donner un peu de volume ?
Allez, c'est parti : 

.link_infobulle:hover::after,
.link_infobulle:focus::after{
  content: attr(aria-label);
  position: absolute;
  padding: 5px 10px;
  background: #62998e;
  color: #fff;
  border-radius: 5px;
  font-size: 0.9rem;
  top: -2.5em;
  left: 50%;
  transform: translateX(-50%);

  white-space: nowrap;

  box-shadow: 0 8px 8px -4px rgba(0,0,0,0.20);

}

Par contre, là, nous allons avoir un petit soucis visuel : L'ombre passe au dessus de notre flèche. Pour éviter cela, on va devoir mettre notre flèche devant l'info-bulle avec z-index : 

.link_infobulle:hover::before,
.link_infobulle:focus::before {
  content: "▼";
  z-index: 1;
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.2s ease all;
  font-size: 15px;
  color: #62998e;
}

On va pousser les choses un peu plus loin encore, en ajoutant une animation sur l'info-bulle. (ne pas oublier de l'ajouter sur la flèche aussi) 

.link_infobulle:hover::before,
.link_infobulle:focus::before {
  content: "▼";
  z-index: 1;
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.2s ease all;
  font-size: 15px;
  color: #62998e;

  animation-duration: 0.6s;
  animation-name: appear;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


Voilà, il reste juste une chose à faire : j'aime que mon code soit ordonné d'une certaine façon, et c'est aussi valable pour le CSS. Cet ordre me permet de retrouver rapidement une ligne de code que je veux modifier par la suite et cela facilite aussi la lecture pour les personnes qui auraient à se pencher sur mon code. C'est tout personnel, vous pouvez le faire ou non, dans cet ordre ou dans un autre.

J'écris ces lignes dans le fichier « main.css » ou « style.css » au tout début. Je le fais surtout dans des projets d'au minimum une centaine de lignes de code, mais c'est, je le pense, une bonne habitude à avoir :

/**
****************************************
* Règles à suivre :
****************************************
* Régles à suivre au sein même des composants :
* - positionnement
* - dimensions
* - Bordure et fonds
* - texte
* - Propriété css3 navigateur
*/


Si on range le code et en récapitulant ce que l'on a fait jusqu'à présent, on obtient : 
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html {
  background-color: rgb(128, 128, 128);
}

.link_infobulle {
  position: relative;
}

.link_infobulle:hover::after,
.link_infobulle:focus::after{
  position: absolute;
  top: -2.5em;
  left: 50%;
  padding: 5px 10px;
  background: #62998e;
  border-radius: 5px;
  box-shadow: 0 8px 8px -4px rgba(0,0,0,0.20);
  content: attr(aria-label);
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: #fff;
  white-space: nowrap;
  transition: 0.2s ease all;
  animation-duration: 0.6s;
  animation-name: appear;
}

.link_infobulle:hover::before,
.link_infobulle:focus::before {
  position: absolute;
  z-index: 1;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  content: "▼";
  font-size: 15px;
  color: #62998e;
  transition: 0.2s ease all;
  animation-duration: 0.6s;
  animation-name: appear;
}


On pourrait très bien mettre les « keyframes » dans un autre fichier.

Il y a un inconvénient à ce code : si votre info-bulle se trouve trop près d'un bord de votre écran, il ne va pas s'afficher correctement...

Évidemment, ce que j'ai codé est à but didactique. Vous pouvez tout utiliser, modifier, améliorer ou seulement utiliser une partie de ce code. 

Si vous voulez partager votre propre info-bulle ou si j'ai commis des erreurs, n'hésitez pas à mettre un commentaire.

Amusez-vous bien.