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: