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; } Tooltip beim Bewegen der Maus anzeigenWow, das ist großartig, das ist ein epischer Tooltip-Text
BEARBEITEN: Wichtig ist, dass das Bewegen des Mauszeigers auf das Element funktioniert, nicht auf die Box, in der es sich befindet.
一种实现方法是创建一个位于被悬停文本上方和旁边的
::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; }有很多方法可以实现，但如果你只是想让工具提示在容器外可见，你不需要使用
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; }