Fred007 Fred007 - 1 year ago 140
CSS Question

Tooltip text for html table data in css

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: But its not working in my code for some reason. Any ideas?


<div class="content">
<div class="header">
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<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>
<!--2. riadok D-->
<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><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 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>

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download