Introduction à l'info-bulle CSS (explication détaillée)-tutoriel CSS-php.cn

Ce chapitre vous apporte une introduction (explication détaillée) de CSS Tooltip . Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

L'info-bulle est déclenchée une fois que la souris se déplace vers l'élément spécifié et peut être affichée dans quatre directions : affichage de la tête, affichage de droite, affichage de gauche et affichage du bas.

1. Info-bulle de base

L'info-bulle s'affiche lorsque la souris se déplace vers l'élément spécifié :

/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

Copier après la connexion

Exemple d'analyse

HTML) Utilisez l'élément conteneur (comme

) et ajoutez la classe "tooltip". Afficher une info-bulle lorsque la souris passe sur

Placez le texte de l'info-bulle sur un élément en ligne (tel que ) et utilisez class="tooltiptext".

La classe CSS)tooltip utilise position:relative et le texte d'invite doit définir la valeur de positionnement position:absolute. Remarque : Les exemples suivants montreront davantage d'effets de positionnement.

La classe tooltiptext est utilisée pour le texte de l'info-bulle réel. Le modal est masqué et apparaît lorsque la souris est déplacée sur l'élément. Certaines largeurs, couleurs d'arrière-plan, couleurs de police et autres styles sont définis.

La propriété CSS3 border-radius est utilisée pour ajouter des coins arrondis à la boîte d'invite.

: le sélecteur de survol est utilisé pour afficher l'invite lorsque la souris se déplace sur l'élément spécifié

2. Info-bulle de positionnement

Dans l'exemple suivant, l'info-bulle est affichée sur le côté droit de l'élément spécifié (gauche : 105 % ).

Notez que top:-5px revient à le positionner au milieu de l'élément conteneur. Utilisez le chiffre 5 car le remplissage supérieur et inférieur du texte de l'info-bulle est de 5 px.

Si vous modifiez la valeur de padding, la valeur supérieure doit également être modifiée en conséquence, afin de garantir qu'elle soit centrée.

C'est également le cas lorsque la boîte de dialogue est affichée à gauche.

apparaît à droite :

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

Copier après la connexion

apparaît à gauche :

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

Copier après la connexion

si vous souhaitez un outil d'indice Affiché en en-tête et en bas. Nous devons utiliser l'attribut margin-left et le définir sur -60px. Ce nombre est calculé en utilisant la moitié de la largeur pour l'alignement central, soit : largeur/2 (120/2 = 60).

est affiché dans l'en-tête :

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

Copier après la connexion

est affiché en bas :

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

Copier après la connexion

3. Ajouter une flèche

Nous pouvons utiliser le pseudo-element ::after et les attributs de contenu pour créer une petite flèche pour l'outil d'invite. bordure, mais lorsqu'elle est combinée, elle invite L'outil est comme une boîte de message vocal.

L'exemple suivant montre comment ajouter une flèche inférieure à l'info-bulle qui s'affiche en haut :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

Copier après la connexion

Exemple d'analyse

Positionnement de la flèche dans l'info-bulle : haut : 100% , une flèche apparaîtra en bas de l'info-bulle. gauche : 50 % est utilisé pour centrer la flèche.

Remarque : L'attribut border-width spécifie la taille de la flèche. Si vous le modifiez, modifiez également la valeur de la marge gauche. De cette façon, la flèche peut être affichée centrée.

border-color est utilisé pour convertir le contenu en flèches. Définissez la bordure supérieure sur noire et le reste sur transparent. Si d'autres paramètres sont également noirs, ils seront affichés sous la forme d'un quadrilatère noir.

L'exemple suivant montre comment ajouter une flèche à la tête de l'info-bulle :

Boîte de pointe inférieure/flèche supérieure :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* 提示工具头部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

Copier après la connexion

Les deux exemples suivants sont des exemples de flèches sur les côtés gauche et droit :

Boîte d'invite droite/flèche gauche :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* 提示工具左侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

Copier après la connexion

Boîte d'invite gauche/flèche droite :

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* 提示工具右侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

Copier après la connexion

4. Effet de fondu

Nous pouvons utilisez l'attribut de transition CSS3 et l'attribut d'opacité pour obtenir l'effet de fondu de l'outil d'invite :

Boîte d'invite gauche/flèche droite :

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}
 
.tooltip:hover .tooltiptext {
    opacity: 1;
}

Copier après la connexion

5 . Exemple de code :

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor&#39;s post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

Copier après la connexion

Rendu :

Introduction à linfo-bulle CSS (explication détaillée)

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!

Étiquettes associées：

css

source：php.cn

Article précédent：Comment CSS utilise-t-il la technologie d’aplatissement d’image ? Article suivant：Qu’est-ce que Dimension en CSS ? (exemple de code)

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur