CSS div positioning assistance

Question

I need some help with the positioning of divs that appear on each #box's hover event. The hidden divs should appear over the box that was hovered in a way that:

1. Each #tooltip div covers the box that was hovered plus the box next to it
2. The tooltips of boxes 1 & 2 should cover the boxes to the right

3. tooltips for box 3 & 4 should cover the boxes to their left

   (to make it more understandable, please see the attached image
4. There will be several rows of boxes so positioning should be relative and not fixed to the page dimensions (i suppose)

So far I haven't managed to get the #tooltip positionings right (I know that one should be absolute and the other relative but no matter my efforts, I haven't nailed it yet).

Here's a jsfiddle to work on and this is the result i'm after:

Answer 1

Is this, what you're trying to get?

http://jsfiddle.net/xnrdp/1/

Answer 2

I've put together a Fiddle that I think accomplishes what you describe.

The idea behind it is that i put a wrapper around the box and its tooltip. Then I listen for the mouse-hover events on the wrapper instead of the box and its tooltip individually. That way we avoid flickering when the tooltip is shown and therfor the cover the element that was initially hovered.

Making the wrappers position relative makes it possible to position the tooltip absolutely in relation to it. With a small if-statement in your jQuery hover-callback, we can then determine if the tooltip should be aligned with the left or right side of the box.

Attaching the code from the fiddle in the answer as well, if the fiddle would disappear for some reason.

Markup:

<div class="container">
    <div class="boxwrapper">
       <div id="box1" class="box">Box 1</div>
       <div id="tooltip1" class="tooltip">Description 1</div>
    </div>
    <div class="boxwrapper">
       <div id="box2" class="box">Box 2</div>
       <div id="tooltip2" class="tooltip">Description 2</div>
    </div>
    <div class="boxwrapper">
       <div id="box3" class="box">Box 3</div>
       <div id="tooltip3" class="tooltip">Description 3</div>
    </div>

    <div class="boxwrapper">
       <div id="box4" class="box">Box 4</div>
       <div id="tooltip4" class="tooltip">Description 4</div>
    </div>
    <div class="clearfix"></div>
</div>​

CSS:

.container {
    width: 450px;
    height: auto;
}

.box {
    background: #CCC;
    padding: 20px;
    float: left;
    height: 60px;
    width: 60px;
    list-style-type: none;
    margin: 5px;
    z-index: 1;
}
.tooltip {
    background: rgba(153,153,153,0.7);
    padding: 20px;
    height: 60px;
    width: 170px;
    margin: 5px;
    display:none;
    position: absolute;
    z-index: 2;
}
.clearfix {
    clear: both;
    float: none;
    height: 1px;
}
.boxwrapper {
    position: relative;
    float: left;
}

jQuery:

$(document).ready(function() {

    $(".boxwrapper").mouseenter(function() {
        var tooltip = $(".tooltip", this);
        tooltip.show();
        if ($(".boxwrapper").index(this) < 2) {
            tooltip.css("left", 0);
        } else {
            tooltip.css("right", 0);
        }
    });

    $(".boxwrapper").mouseleave(function(event) {
        $(".tooltip", this).hide();
    });

});  ​

Update:

If you are going to use it on more than one row of boxes, you will have to improve the if-statement somewhat to take that into consideration.