CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

Question

I have this project: http://jsfiddle.net/dmzq1938/3/. The generated stuff is a little messy, but it's the hovered elements I'm interested in anyway.

In the fiddle, if you hover over one of the Blue/Green/Grey rectangles in the top row, you can see what the issue is. But if you hover over one on the bottom row, you can see how it should look.

I understand the whole Z-Index relying on it's parent's relationship with it's siblings and I have tried making it so that on hover it makes the whole row a z-index above the others, however the problem then becomes that you can have one clicked on, and hover over another at the same time so you have a row overlapping.

What I want is to be able to click and/or hover over the boxes and the tooltip bubble to appear over the top of all the boxes. Ideally without having to put all the tooltips on the same level as the whole row!

For Completeness sake:

JS

$(document).on('click', '.routetimeline .bars > div.stop, .routetimeline .bars > div.driving, .routetimeline .bars > div.break', function () {
    var AllDivs = $('.routetimeline .bars > div');
    AllDivs.removeClass('selected');
    var AllBalloons = $('.routetimeline .bars div.balloon');
    AllBalloons.hide();
    AllBalloons.css('box-shadow', '0');
    var ThisDiv = $(this);
    var ThisBar = ThisDiv.parent();
    var ThisBalloon = ThisDiv.next('.balloon');
    if (ThisDiv.hasClass('selected')) {
        ThisDiv.css('z-index', 'auto');
        ThisDiv.removeClass('selected');
        ThisBalloon.hide();
        ThisBalloon.css('box-shadow', '0');
    } else {
        ThisDiv.css('z-index', '100');
        ThisDiv.addClass('selected');
        ThisBalloon.show();
        ThisBalloon.css('box-shadow', '1px 1px 2px 1px #7A7A7A');
    }
});
$(document).on('mouseenter', '.routetimeline .bars > div.stop, .routetimeline .bars > div.driving, .routetimeline .bars > div.break', function () {
    var ThisDiv = $(this);
    if (!ThisDiv.hasClass('selected')) {
        ThisDiv.css('z-index', '100');
        var ThisBalloon = ThisDiv.next('.balloon');
        ThisBalloon.show();
        ThisBalloon.css('box-shadow', '1px 1px 2px 1px #7A7A7A');
    }
});
$(document).on('mouseleave', '.routetimeline .bars > div.stop, .routetimeline .bars > div.driving, .routetimeline .bars > div.break', function () {
    var ThisDiv = $(this);
    if (!ThisDiv.hasClass('selected')) {
        ThisDiv.css('z-index', 'auto');
        var ThisBalloon = ThisDiv.next('.balloon');
        ThisBalloon.hide();
        ThisBalloon.css('box-shadow', '0');
    }
});

I am quite aware I might be asking for the impossible, because logically it is. All "Outside-the-box" attempts considered!

Answer 1

http://jsfiddle.net/deannorth/naLLwqjk/1/

js

ThisDiv.closest('.row').css('z-index', '2');

css

.row{
    z-index:1;
    position:relative;
}

This is close to what you are after. To get the tooltips to work correctly you need to z-index the parent rows.

However, doing it this way means that you have a different problem when you click roe 3 for example, then hover over row 4 or 5. You then have a row over the static tooltip.

Your best bet withoug changing markup would be to have the tooltip stay open when the user clicks it, but then hide the static tooltip when they hover over another element. This means that they would only ever be alowed one tooltip open at a time, but it would mean that you dont run into the issue described above.