CSS - не показывая всплывающее окно

Question

У меня есть следующий код:

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> 

При наведении курсора мыши на изображение, оно показывает, Here it'll be a little explanation of this table ниже картинки, а не как всплывающее окно ... Почему?

Answer 1

Вы вставляете свои классы css, которые не разрешены в CSS, если вы, возможно, не используете препроцессор?

ваш CSS должен быть, как это я представляю себе: 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; 
    }