Maison >interface Web >tutoriel CSS >Définir l'info-bulle gauche à l'aide de CSS
Définir l'info-bulle gauche à l'aide de CSS
- PHPzavant
- 2023-09-07 15:29:06938parcourir
Pour définir l'info-bulle de gauche, utilisez la propriété CSS right .
Vous pouvez essayer d'exécuter le code suivant pour définir l'info-bulle de gauche sur du texte :
Exemple
Démo en direct
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: orange;
color: white;
z-index: 1;
top: -6px;
right: 100%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.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!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment sélectionner des éléments dont la valeur d'attribut contient un mot spécifié en utilisant CSS ?Article suivant：Comment sélectionner des éléments dont la valeur d'attribut contient un mot spécifié en utilisant CSS ?