Utilisez la propriété CSS top pour ajouter une flèche au bas de l'info-bulle.
Vous pouvez essayer d'exécuter le code ci-dessous pour ajouter une info-bulle avec une flèche vers le bas :
Live Demo
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
bottom: 100%;
left: 60%;
margin-left: -90px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-top: 50px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 7px;
border-style: solid;
border-color: blue transparent transparent transparent;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>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!
La différence entre le compte de service WeChat et le compte officiel
Comment illuminer le moment des amis proches de Douyin
Comment gérer le ralentissement de l'ordinateur et la lenteur des réponses
esd en iso
Introduction aux fichiers de configuration php
Comment nettoyer le lecteur C lorsqu'il devient rouge
Comment gérer les caractères chinois tronqués sous Linux
monfreemp3
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
