Comment obtenir un effet en cascade des éléments en HTML ?

Question

Je voulais créer une info-bulle personnalisée pour cet élément, mais elle est contenue dans une boîte qui n'a pas assez de place pour afficher l'info-bulle, elle est donc simplement recadrée (en fait, je peux faire défiler jusqu'à Il s'affiche car ;overflow est défini sur auto, mais je souhaite qu'il soit visible sans défilement). Existe-t-il un moyen de le faire afficher au-delà des limites ? J'ai essayé d'utiliser z-index mais cela n'a pas fonctionné.

Voici ce que j'ai dit :

.box {
  largeur : 100 px ;
  hauteur : 100px ;
  débordement : automatique ;
  style de bordure : solide ;
  couleur de la bordure : rouge ;
}

.info-bulle{
  rembourrage supérieur : 20 px ;
  position : relative ;
  affichage : bloc en ligne ;
}


.tooltip .tooltiptexte {
  affichage : aucun ;
  largeur maximale : 60vw ;
  largeur minimale : 15 vw ;
  couleur de fond : blanc ;
  style de bordure : solide ;
  couleur de la bordure : #1a7bd9 ;
  position : absolue ;
  indice z : 1 000 000 ;
}

.tooltip: survolez .tooltiptext {
  bloc de visualisation;
}</pré>
<pre class="brush:html;toolbar:false;"><div class='box'>
  <div class='tooltip'> Afficher l'info-bulle au survol de la souris
    <div class='tooltiptext'>
      Wow, c'est génial, c'est un texte d'info-bulle épique
    </div>
  </div>
</div>

EDIT : l'important est que le survol fonctionne sur l'élément, pas sur la boîte dans laquelle il se trouve.

Answer 1

Une façon de procéder consiste à créer un pseudo-élément ::before placé au-dessus et à côté du texte survolé.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border-style: solid;
  border-color: red;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: "哇，这太棒了，这是一个史诗般的工具提示文本";
  position: absolute;
  left: 25%;
  bottom: -75%;
  display: none;
  width: 500px;
  background-color: white;
  border: 2px solid pink;
}

.tooltip:hover::before {
  display: flex;
}

<div class='box'>
  <div class='tooltip'>
    鼠标悬停查看工具提示
  </div>
</div>

Answer 2

Il existe de nombreuses façons de procéder, mais si vous souhaitez simplement que l'info-bulle soit visible à l'extérieur du conteneur, vous n'avez pas besoin d'utiliser z-index或overflow. Il vous suffit de déplacer l'info-bulle dans un contexte de positionnement à l'intérieur du conteneur relatif.

Selon votre commentaire, puisque vous souhaitez que l'info-bulle n'apparaisse que lorsque vous survolez le texte, je vous recommande que votre conteneur relatif enveloppe exactement ce que vous souhaitez survoler. Pour illustrer cela, j'ai ajouté une bordure au cadre extérieur, par rapport à l'endroit où vous décidez d'utiliser un conteneur relatif.

Ensuite, positionnez simplement box:hover更改为relative-container:hover sur le bon élément.

J'ai essayé d'organiser le HTML et les noms de classe pour qu'ils soient plus sémantiques et concis à des fins d'illustration. J'espère que cela t'aides!

Exemple

.box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding: 10px;
}

.tooltip {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border: #1a7bd9 solid;
  display: none;
}

.relative-container:hover .tooltip {
  display: block;
  cursor: pointer;
}

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I have a little padding to give the text some room.
    </div>
    <div class='tooltip'>
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top of the box content containing text and take up the full width. I only appear when hovering over the box content (red outline), not the surrounding container (blue outline).
    </div>
  </div>
</div>