I tried to make a tooltip text when I hover over a specific table column in my table but its not working. I don't want to use JS or Jquery. Any ideas how to make it work in CSS? Full working table row in JsFiddle
I tried this: http://www.w3schools.com/css/css_tooltip.asp But its not working in my code for some reason. Any ideas?
JsFiddle: https://jsfiddle.net/6tLmn9sd/
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="200px">Cislo/Meno</th>
<th width="600px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="500px">Komentár</th>
<th width="100px">Dátum</th>
<th width="60px">Počet</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center;background-color: #d0f5f6">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td><div class="tooltip">Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltiptext">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span> </div></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td>ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</td>
<td style="text-align:center">07/07/2016</td>
<td style="text-align:center">2</td>
</tr>
You didn't add any CSS to make your tooltip show up on hover. Besides, I would recommend you to move your .tooltip class to <td> tag. Please see the modified code:
https://jsfiddle.net/cbqfqmLc/