将绝对元素定位在相对父容器之外

Question

I am trying to position the element(tooltip) outside of the parent element

code sample: You can see that when you hover on first li the tooltip is cut off.

 ul{ height: 200px; overflow: auto; } li{ position: relative; height: 40px; } .tooltip{ position: absolute; visibility: hidden; bottom: 45px; } li:hover > .tooltip{ visibility: visible; }

 <ul> <li>some data <span class="tooltip">Lots of data</span> </li> <li>some data2 <span class="tooltip">Lots of data</span> </li> ... ... </ul>

Ok, so in the above code, when you hower on the first li element the tooltip element is cut off by the container overflow: auto , The auto overflow has to be there as this ul element will contain lots of li and I want user to scroll through the list items.

So my question is following: Is there a way to maintain the scroll behaviour of the ul element and at the same time to display the tooltip so that it is not cut off by the ul element?

Any help is appreciated!

Answer 1

Use a containing element to apply scroll:

 .list-wrapper { height: 100px; overflow: auto; padding-top: 30px; } li { position: relative; height: 40px; } .tooltip { position: absolute; visibility: hidden; bottom: 45px; } li:hover>.tooltip { visibility: visible; }

 <div class="list-wrapper"> <ul> <li>some data <span class="tooltip">Lots of data</span> </li> <li>some data2 <span class="tooltip">Lots of data</span> </li> <li>some data <span class="tooltip">Lots of data</span> </li> <li>some data2 <span class="tooltip">Lots of data</span> </li> <li>some data <span class="tooltip">Lots of data</span> </li> <li>some data2 <span class="tooltip">Lots of data</span> </li> <li>some data <span class="tooltip">Lots of data</span> </li> <li>some data2 <span class="tooltip">Lots of data</span> </li> </ul> </div>