How to achieve cascading effect of elements in HTML?
P粉486138196
2023-08-28 16:39:50
<p>I wanted to make a custom tooltip for this element, but it's contained within a box that doesn't have enough room to display the tooltip, so it just gets cropped (actually I can scroll to It's showing because <code>overflow</code> is set to <code>auto</code>, but I want it to be visible without scrolling). Is there a way to make it display beyond the bounds? I've tried using <code>z-index</code> but that didn't work. </p>
<p>This is what I said:</p>
<p>
<pre class="brush:css;toolbar:false;">.box {
width: 100px;
height: 100px;
overflow: auto;
border-style: solid;
border-color: red;
}
.tooltip{
padding-top: 20px;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
display: none;
max-width: 60vw;
min-width: 15vw;
background-color: white;
border-style: solid;
border-color: #1a7bd9;
position: absolute;
z-index: 1000000;
}
.tooltip:hover .tooltiptext {
display: block;
}</pre>
<pre class="brush:html;toolbar:false;"><div class='box'>
<div class='tooltip'> Display tooltip on mouse hover
<div class='tooltiptext'>
Wow, this is awesome, this is an epic tooltip text
</div>
</div>
</div></pre>
</p>
<p>EDIT: The important thing is that hovering works on the element, not the box it's in. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
One way to do this is to create a
::beforepseudo-element above and next to the hovered text.* { 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>There are many ways to do this, but if you just want the tooltip to be visible outside the container, you don't need to use
z-indexoroverflow. You just need to move the tooltip into a positioning context inside the relative container.Based on your comments, since you want the tooltip to only appear when hovering over the text, I would recommend that your relative container wrap exactly what you want to hover. To illustrate this, I added a border to the outer frame, compared to where you decide to use a relative container.
Then just change
box:hovertorelative-container:hoverto target the correct element.I tried to organize the HTML and class names to be more semantic and concise for illustration. Hope this helps!
Example
.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>