Targeting siblings using css and pseudo elements

Question

I'm trying to write a simple step form script and I would like the ability to use custom titles for tooltips. I created an attribute called data-title to accomplish this and using the pseudo-element ::after I created a tooltip. The problem I'm having is that the tooltip appears behind the next siblings in the list instead of over top. Here's a link to my JS-Fiddle, and here's the code:

Foo

Bar

Stuff

foo 2.0

More

li{
list-style:none;
}
.step-form{
width:90%;
}
.step-form li{
float: left;
margin:0 5px;
text-align: center;
position: relative;
z-index:10;
}
.step-name{
display: table-cell;
vertical-align: bottom;
text-align:center;
margin:0 5px;
z-index:20;
}
.step-num{
border: 2px solid #B8B5B5;
border-radius: 50%;
width: 15px;
height: 15px;
display: inline-block;
margin:10px 5px;

}
.step-num[data-title]:hover:after {
background: #366F9E;
border-radius: .5em;
bottom: 2em;
color: #fff;
left: -2.5em;
content: attr(data-title);
display: block;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
opacity:1;
z-index: 30;
}

Please keep in mind I'm trying to make this as simple and light weight as possible. Thanks!

Answer 1

You need to avoid the li elements creating a stacking context. Avoid setting a numeric z-index on them, and set it instead to auto

.step-form li{
float: left;
    margin:0 5px;
    text-align: center;
    position: relative;
    z-index: auto;   // change this
}

fiddle