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 list needs to be scrollable.

Here is 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 whose text is wider than 160 pixels I want a hover event to reveal the tooltip element's text and I want this text to spill outside of its container, ul.

I have read the following resources but none of them have helped me:

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?
http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent
What causes a parent container to cut off content in child element?
https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346

回答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.

回答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

<ul class="list">
  <li class="list-item">color</li>
</ul>

CSS

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

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

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

Example on Codepen

来源：https://stackoverflow.com/questions/50730452/how-to-force-div-to-spill-outside-of-ul-container-on-hover

标签

javascript

jquery

html

css