CSS - no showing popup - html

Question

I have the following code:
CSS
#help {
width: 100%;
.titletext {
float: left;
font-size: 150%;
}
.helpimage {
float: right;
position: relative;
}
.helpimage .tooltip-content {
display: none;
position: relative;
bottom: 5%;
left: 5%;
right: 5%;
background-color: red;
padding: .5em;
line-height: 1em;
}
.helpimage:hover .tooltip-content {
display: block;
}
}
HTML/MEDIAWIKI
<div id="help">
<div class="titletext">Gene information</div>
<div class="helpimage">[[File:Help.png]]
<div class="tooltip-content">
<p>Here it'll be a little explanation of this table.</p>
</div>
</div>
</div>
With mouseover (above the image), it shows Here it'll be a little explanation of this table
Below the picture, not as a popup... Why is that behaving like that?

Answer 1

you're nesting your css classes which is not allowed in CSS, unless you are maybe using a preprocessor?
your css should be like this I imagine:
http://jsfiddle.net/72o3x47p/2/
#help {
width: 100%;
}
.titletext {
float: left;
font-size: 150%;
}
.helpimage {
float: right;
position: relative;
}
.helpimage .tooltip-content {
display: none;
position: absolute; /* change from relative to absolute */
top: 0;
left: 0;
background-color: red;
padding: .5em;
line-height: 1em;
}
.helpimage:hover .tooltip-content {
display: block;
}