Comment contrôler et modifier l'apparence d'une infobulle ?

Pour commencer, il faut bien faire la différence entre l'infobulle (attribut title) et le texte alternatif (attribut alt).

• Le texte alternatif (alt) est le descriptif textuel appliqué uniquement aux images et nécessaire aux visiteurs non-voyants par exemple. Il apparait lorsque l'image n'est pas présente. En HTML4 et XHTML 1.x alt est obligatoire sur les balises <img /> et <area /> dans tous les doctypes (HTML et XHTML, strict, transitionnel ou frameset) et ne devrait pas s'appliquer à d'autres éléments.
• L'infobulle est le petit cadre (souvent jaune) qui s'affiche au survol d'un élément. Ce cadre contient en général des informations supplémentaires à propos de cet élément.

La confusion provient généralement d'un ancien bug de comportement d'Internet Explorer pour ses premières versions : celui-ci créait également une infobulle avec l'attribut "alt", alors que cela n'a pas lieu d'être.

Il n'est pas possible de modifier l'apparence de l'infobulle générée par la propriété "title". Par contre, il est tout à fait possible de créer sa propre infobulle en utilisant une balise ou un attribut que l'on fait apparaître au survol du texte.

Exemple :

<p>Lorem Elsass ipsum réchime amet non <span class="infobulle" aria-label="texte de l'infobulle">Choucroute</span> Picon bière Coopé knack tchao bissame hopla</p>

.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: help;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne */
}

Voir un exemple en ligne.