[Tutoriel recommandé : Tutoriel vidéo CSS]
CSS pur pour implémenter une info-bulle, CSS pour changer le style de titre de la balise html [Le l'auteur mettra à jour quand il aura le temps Certaines conditions aux limites. Le style actuel est problématique dans les cas extrêmes. Veuillez ne pas copier le code directement dans l'environnement en ligne. Ceci est juste une petite démo écrite par l'auteur]
code html :
.Le code suivant est disponible directement et le style de Tootip peut être débogué par vous-même.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
span {
position: relative;
margin: 50px auto;
border: 1px solid;
}
span[aria-label]:hover:after {
content: attr(aria-label);
position: absolute;
bottom: -30px;
left: 0;
border: 1px solid;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<span aria-label="我是tooltip">我是主体内容啊</span>
</div>
</body>
</html>Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
