showing DIV on Hover - overflow auto - css

Question

I want to show a div by hovering over its parent.
The code is quite big so I'll try to explain.
On the site there is a scrollable div (overflow:auto) which shows a table.
-> it shows 10 lines of the table and the rest (nearly 30) must be scrolled.
In every tr of my table there is a div(hover_over) that has a child-div (show_by_hower)
By hovering over the div (hover_over) the child-div (show_by_hower) should be displayed.
That works so far but the child-div (show_by_hower) is always under the scrolling div.
If I remove the overflow:auto; from the scrollable div it all works fine but I need the overflow auto.
#hover_over
{
position:relative;
width:20px;height:20px;
}
#hover_over:hover div
{
position:absolute;
display:block;
z-index:999;
width:310px;
height:125px;
}
#hover_over div { display:none; }
There is no other positioning in the code.

Answer 1

Here is a jsFiddle with one possible solution. I'm using jQuery's .hover() method to animate an element outside of the table and fill it with the content contained inside the table. This way, your pop-up element is not restricted to the bounds of the table.
Here is the jQuery code:
$(function() {
$(".hover_over").hover( function() {
hovDiv = $(this);
showDiv = $(".show_hover");
showDiv.html(hovDiv.children("div").html());
showDiv.css("top", hovDiv.offset().top)
showDiv.css("left", hovDiv.offset().left + hovDiv.width()).show();
}, function() {
$(".show_hover").hide();
});
});
And the HTML:
<div class="theTable">
<div class="hover_over">1
<div>I'm hidden! 1</div>
</div>
<div class="hover_over">2
<div>I'm hidden! 2</div>
</div>
<div class="hover_over">3
<div>I'm hidden! 3</div>
</div>
<div class="hover_over">4
<div>I'm hidden! 4</div>
</div>
<div class="hover_over">5
<div>I'm hidden! 5</div>
</div>
</div>
<div class="show_hover"></div>
And the CSS:
.show_hover {
display:none;
position:absolute;
background-color:black;
width:100px;
height:20px;
font-size:14px;
color:white;
}
.hover_over div { display:none; }
Update
Because you asked, I decided to make this work with plain javascript. It is not as easy to read, but the same idea applies: move the popup div outside the table and dynamically add the desired content and positioning with onmouseover and onmouseout event handlers.
Here is the new jsFiddle.
And here is the relevant code:
Javascript
(function() {
function hoverIn() {
var hovDiv = this;
var showDiv = document.getElementById("show_hover");
showDiv.innerHTML = hovDiv.children[0].innerHTML;
showDiv.className = "see";
var newTop = hovDiv.offsetTop + hovDiv.offsetParent.offsetTop + hovDiv.offsetParent.offsetParent.offsetTop;
showDiv.style.top = "" + newTop + "px";
var newLeft = hovDiv.offsetLeft + hovDiv.offsetParent.offsetLeft + hovDiv.offsetParent.offsetParent.offsetLeft + hovDiv.clientWidth;
showDiv.style.left = "" + newLeft + "px";
};
function hoverOut() {
document.getElementById("show_hover").className = "";
};
var hoverDivs = document.getElementsByClassName("hoverdiv");
for(var i = 0; i < hoverDivs.length; i++)
{
hoverDivs[i].onmouseover = hoverIn;
hoverDivs[i].onmouseout = hoverOut;
}
})();
CSS
#show_hover
{
display:none;
position:absolute;
top:0;
left:0;
}
#show_hover.see {
display:block;
background-color:green;
width:400px;
height:80px;
position:absolute;
top:20px;
left:20px;
}
Update 2
This answer is getting insanely long. Here's the new jsFiddle. This update allows you to hover over the shown div to interact with the objects inside. I made use of the basic idea behind the hoverIntent jQuery plugin, which is to place the onmouseout handler behind a setTimeout call that allows you half a second to move your mouse into the popup before it disappears. It's a bit fidgety, so you might play with the wait time until it does what you want.
Also, see this StackOverflow question if you want to just check to see where the mouse is at any given moment and trigger the show/hide behavior off that.
That said, here's the important part of the update:
var mouseInShowHover = false;
var showDiv = document.getElementById("show_hover");
showDiv.onmouseover = function() { mouseInShowHover = true; }
showDiv.onmouseout = function() {
mouseInShowHover = false;
showDiv.className = "";
}
function hoverOut() {
setTimeout( function() {
if( !mouseInShowHover )
showDiv.className = "";
}, 500);
};

Answer 2

Well, your JSFiddle example worked fine for me, so I'm assuming you're using IE8 or something that has very strict z-index rules.
Try adding this:
#divscroll tr:hover {
position:relative;
z-index:1;
}
JSFiddle example.