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>
One way to do this is to create a
::before
pseudo-element above and next to the hovered text.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-index
oroverflow
. 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:hover
torelative-container:hover
to 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