Converting a Popup to Relative Isn't Working - css

Question

I have an old piece of code that pops up a message on moseover. It is coded with absolute positioning and works fine. But I need to change it to relative positioning so the code works better with mobile devices. In this jsfiddle the top line is using relative and doesn't work. The bottom line is using absolute and is working. Would someone please point out where I am going wrong? Here's my code:
<style>
.tooltips {
position: relative;
display: inline;
}
.spank{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spank:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spank:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showhim:hover .spank{
display : block;
left:5px;
top:1px;
margin-left: 50px;
z-index: 999
}
.showhim {
left: 50px;
position: relative;
top: 80px;
width: 100px;
}
.spankme{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spankme:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spankme:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showme:hover .spankme{
display : block;
left: 10px;
top:10px;
margin-left:50px;
z-index: 999
}
.showme {
position: relative;
width: 100px;
}
</style>
<div class="showme">
<div class="showme tooltips">Mouse me</div>
<span class="spankme">Text on popupPlace</span>
</div>
<div class="showhim">
<div class="showit tooltips">Mouse me</div>
<span class="spank">Text on popupPlace</span>
</div>

Answer 1

For the hover that applies to .spankme, you aren't targeting the parent like you did with .spank. The following will allow the parent to reference the child on hover.
Change
.showme:hover .spankme
to
.showhim:hover .spankme
Also, you have three z-index: 999 properties that are missing a closing semi-colon.