Is there a way to make an arbitrary div nested within a ul overflow outside of the ul, even if the ul has a set width of 160px and overflow-y: hidden? The reason for setting it to overflow-y: hidden is because I need the list to be scrollable.
Here is the structure of my list:
<ul>
<li> color name</li>
<div class="tooltip">color name</div>
<li> color name</li>
<div class="tooltip">color name</div>
<li> color name</li>
<div class="tooltip">color name</div>
.....
</ul>
For the names that exceed 160 pixels in width, I would like a hover event to display the full text of the tooltip element and have this text spill outside of the ul.
I have gone through various resources but haven't found a solution yet:
- Allow specific tag to override overflow:hidden
- Hovered element to overflow out from an overflow:hidden element css
- https://css-tricks.com/popping-hidden-overflow/
- CSS spread <li> horizontally across <ul>
- Why does inner DIV spills out of outer DIV?
- What causes a parent container to cut off content in child element?