Comment puis-je personnaliser l'apparence des info-bulles des éléments d'ancrage avec CSS ?

Personnalisation de l'apparence des info-bulles des éléments d'ancrage

Lors de l'utilisation de balises d'ancrage avec l'attribut title, l'info-bulle qui apparaît par défaut offre des options de personnalisation limitées. Il comporte généralement une petite police et un simple fond jaune.

Si vous recherchez un meilleur contrôle sur la présentation de l'info-bulle, CSS propose une solution. En utilisant l'expression CSS attr, ainsi que le contenu généré et les sélecteurs d'attributs, vous pouvez affiner le style de l'info-bulle.

Exemple :

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}

HTML :

<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

Avec ce CSS, au survol de la balise d'ancrage , l'info-bulle apparaît en dessous, affichant le contenu de l'attribut title. Vous pouvez personnaliser davantage l'apparence de l'info-bulle en modifiant les propriétés telles que la taille de la police, la couleur et le style d'arrière-plan.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!