Introduction à l'info-bulle CSS (explication détaillée)

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;
}

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%; 
}

apparaît à gauche :

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

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) 来居中提示工具 */
}

est affiché en bas :

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

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;
}

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;
}

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;
}

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;
}

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;
}

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'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;
}

Rendu :

.

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!