I have created table with 21 columns, since the names of each column was too big I reduced them and now I would like to add pop-over on:hover, on each of them which will display the full text. Here is the HTML:
<div class="col-lg-12">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Player</th>
<th>POS</th>
<th>FW</th>
<th>M</th>
<th>FM</th>
<th>YC</th>
<th>RC</th>
<th>G</th>
<th>Ass</th>
<th>SoT</th>
<th>CS</th>
<th>SGM</th>
<th>TW</th>
<th>PI</th>
<th>PC</th>
<th>PKM</th>
<th>S</th>
<th>GC</th>
<th>MP</th>
<th>AMP</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>DEF</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td><div class="checkbox">
<label>
<input type="checkbox">
</label>
</div></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>DEF</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td><div class="checkbox">
<label>
<input type="checkbox">
</label>
</div></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>DEF</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td><div class="checkbox">
<label>
<input type="checkbox">
</label>
</div></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>DEF</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td><div class="checkbox">
<label>
<input type="checkbox">
</label>
</div></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>DEF</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td><div class="checkbox">
<label>
<input type="checkbox">
</label>
</div></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>DEF</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>123</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td>13</td>
<td>322</td>
<td>312</td>
<td>13</td>
<td>32132</td>
<td>312</td>
<td>13</td>
<td>312</td>
<td><div class="checkbox">
<label>
<input type="checkbox">
</label>
</div></td>
</tr>
</tbody>
</table>
</div>
Advertisement
Answer
You can use title attribute in <th title="colName">, you can write full name of column in title when user is hover in <th> title text is show.