Comment obtenir un effet en cascade des éléments en HTML ?-Questions et réponses sur le réseau chinois PHP

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; }   Afficher l'info-bulle au survol de la souris  Wow, c'est génial, c'est un texte d'info-bulle épique 
 
 
 
 EDIT : l'important est que le survol fonctionne sur l'élément, pas sur la boîte dans laquelle il se trouve.

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

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

Hover for tooltip. I have a little padding to give the text some room.

répondre à tous (2)

P粉9261742882023-08-29 15:37:17 2 plancher

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

  鼠标悬停查看工具提示

Comme+0

Ajouter une réponse

P粉9828815832023-08-29 00:55:51 1 plancher

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'utiliserz-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 simplementbox:hover更改为relative-container:hoversur 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

   Hover for tooltip. I have a little padding to give the text some room. 
  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).