recherche

Maison  >  Article  >  interface Web  >  Définir l'info-bulle gauche à l'aide de CSS

Définir l'info-bulle gauche à l'aide de CSS

PHPz
PHPzavant
2023-09-07 15:29:06911parcourir

使用 CSS 设置左侧工具提示

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!

css
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 ?

Articles Liés

Voir plus