How To Force Div To Spill Outside Of Ul Container On Hover?

How can I let an arbitrary div nested within a ul spill outside of the ul, which is set to width: 160px; and overflow-y: hidden;? I have set it to overflow-y: hidden because the li

Solution 1:

First off, you should fix your HTML. Only LI element can be direct children of UL elements. The invalid HTML is not likely to give you any issues in this particular case, but you should always strive to write valid HTML as you never know what weird issues might come up.

Next, if you have overflow: hidden on your parent UL, then there is nothing you can really do without getting javascript involved. Most "tooltip" types of libraries will handle this for you:

• On hover, make a copy of the DIV which is outside of the UL (preferable at the document root - a direct child of the BODY)
• Position the copied DIV so that it appears on top of (or next to) the original DIV - this requires JavaScript and I will leave as an exercise for the OP
• Delete the copy when the user is no longer hovering.

Again, most "tooltip" libraries already do this for you. You might have to write custom CSS to make a tooltip appear on top of and existing element as opposed to next to it.

Solution 2:

If I understand your situation correctly, the problem can be solved by applying the z-index property to an ::after pseudo-element that receives content on :hover.

This creates a "tooltip" that's triggered by a hover state and will "spill out" of any parent div regardless of the parent's overflow property. As a bonus, it won't invalidate your markup with rogue tags in your lists.

HTML

<ulclass="list"><liclass="list-item">color</li></ul>

CSS

.list {
  border: 1px solid black; //to see element boundaryoverflow: hidden;
  width: 160px;
}

.list-item::after {
  content: '';
}

.list-item:hover::after {
  background-color: gray; //aesthetic onlycontent: 'long tooltip text about the color';
  margin-left: 5px; //aesthetic onlyposition: absolute;
  z-index: 999;
}

Example on Codepen