Bootstrap Large table with Pop ups

Tags: , ,



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>

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.



Source: stackoverflow