I have a scrolling DIV, which contains a list of many items:
___________
| |^|
| Item1 | |
|_________| |
| | |
| Item2 | |
|_________| |
| | |
| Item3 | |
|_________|v|
When the user rolls over a list item, a popup appears describing that item:
___________
| |^|
| Item1 | |
|_________| |
| _|_|____________________
| Item2 | Description for item 2 |
|________------------------------
| | |
| Item3 | |
|_________|v|
The dilemma is the scrolling div must have overflow:auto, but the popup wants to be visible outside of the div. So currently, my popup gets chopped off:
___________
| |^|
| Item1 | |
|_________| |
| _|_|
| Item2 | De|
|________---|
| | |
| Item3 | |
|_________|v|
HTML
<div id="box">
<ul>
<li>
<h2>Item 1</h2>
<span>Description for item 1</span>
</li>
<li>
<h2>Item 2</h2>
<span>Description for item 2</span>
</li>
<!-- ... and many other items --->
</ul>
</div>
CSS
#box {
width: 10em;
height: 20em;
overflow: auto;
}
#box ul {
line-height: 2em;
}
#box ul li {
position: relative;
}
#box ul li span {
display: none;
position: absolute;
right: -1em;
top: 1em;
height: 1em;
}
#box ul li:hover span {
display: block;
}
You could try experimenting with position:fixed on the popup element and see if that helps you:
http://jsfiddle.net/SpEb2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With