Wie erreicht man einen kaskadierenden Effekt von Elementen in HTML?

Question

Ich wollte einen benutzerdefinierten Tooltip für dieses Element erstellen, aber er befindet sich in einem Feld, das nicht genug Platz zum Anzeigen des Tooltips bietet, sodass er einfach abgeschnitten wird (eigentlich kann ich zu „Es wird angezeigt“ scrollen, weil ;overflow ist auf auto eingestellt, aber ich möchte, dass es ohne Scrollen sichtbar ist. Gibt es eine Möglichkeit, die Anzeige außerhalb der Grenzen zu ermöglichen? Ich habe versucht, z-index zu verwenden, aber das hat nicht funktioniert.

Das habe ich gesagt:

.box {
  Breite: 100px;
  Höhe: 100px;
  Überlauf: automatisch;
  Randstil: solide;
  Randfarbe: rot;
}

.tooltip{
  Polsterung oben: 20px;
  Position: relativ;
  Anzeige: Inline-Block;
}


.tooltip .tooltiptext {
  Anzeige: keine;
  maximale Breite: 60 vw;
  Mindestbreite: 15vw;
  Hintergrundfarbe: weiß;
  Randstil: solide;
  Rahmenfarbe: #1a7bd9;
  Position: absolut;
  Z-Index: 1000000;
}

.tooltip:hover .tooltiptext {
  Bildschirmsperre;
}

<div class='box'>
  <div class='tooltip'> Tooltip beim Bewegen der Maus anzeigen
    <div class='tooltiptext'>
      Wow, das ist großartig, das ist ein epischer Tooltip-Text
    </div>
  </div>
</div>

BEARBEITEN: Wichtig ist, dass das Bewegen des Mauszeigers auf das Element funktioniert, nicht auf die Box, in der es sich befindet.

Answer 1

一种实现方法是创建一个位于被悬停文本上方和旁边的::before伪元素。

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

有很多方法可以实现，但如果你只是想让工具提示在容器外可见，你不需要使用z-index或overflow。你只需要将工具提示移动到相对容器内的定位上下文中。

根据你的评论，由于你希望工具提示只在悬停在文本上时出现，我建议你的相对容器精确地包裹住你想悬停的内容。为了说明这一点，我在外框上添加了一个边框，与你决定使用相对容器的位置相比。

然后，只需将box:hover更改为relative-container:hover以定位到正确的元素。

我试图组织HTML和类名，使其更具语义性和简洁性以进行说明。希望对你有所帮助！

示例

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