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:
JavaScript
x
194
194
1
<div class="col-lg-12">2
<table id="example" class="display" cellspacing="0" width="100%">3
<thead>4
<tr>5
<th>Player</th>6
<th>POS</th>7
<th>FW</th>8
<th>M</th>9
<th>FM</th>10
<th>YC</th>11
<th>RC</th>12
<th>G</th>13
<th>Ass</th>14
<th>SoT</th>15
<th>CS</th>16
<th>SGM</th>17
<th>TW</th>18
<th>PI</th>19
<th>PC</th>20
<th>PKM</th>21
<th>S</th>22
<th>GC</th>23
<th>MP</th>24
<th>AMP</th>25
<th>Buy</th>26
</tr>27
</thead>28
<tbody>29
<tr>30
<td>Tiger Nixon</td>31
<td>DEF</td>32
<td>13</td>33
<td>312</td>34
<td>13</td>35
<td>312</td>36
<td>13</td>37
<td>312</td>38
<td>13</td>39
<td>312</td>40
<td>13</td>41
<td>312</td>42
<td>13</td>43
<td>312</td>44
<td>312</td>45
<td>13</td>46
<td>312</td>47
<td>312</td>48
<td>13</td>49
<td>312</td>50
<td><div class="checkbox">51
<label>52
<input type="checkbox">53
</label>54
</div></td>55
</tr>56
<tr>57
<td>Tiger Nixon</td>58
<td>DEF</td>59
<td>13</td>60
<td>312</td>61
<td>13</td>62
<td>312</td>63
<td>13</td>64
<td>312</td>65
<td>13</td>66
<td>312</td>67
<td>13</td>68
<td>312</td>69
<td>13</td>70
<td>312</td>71
<td>312</td>72
<td>13</td>73
<td>312</td>74
<td>312</td>75
<td>13</td>76
<td>312</td>77
<td><div class="checkbox">78
<label>79
<input type="checkbox">80
</label>81
</div></td>82
</tr>83
<tr>84
<td>Tiger Nixon</td>85
<td>DEF</td>86
<td>13</td>87
<td>312</td>88
<td>13</td>89
<td>312</td>90
<td>13</td>91
<td>312</td>92
<td>13</td>93
<td>312</td>94
<td>13</td>95
<td>312</td>96
<td>13</td>97
<td>312</td>98
<td>312</td>99
<td>13</td>100
<td>312</td>101
<td>312</td>102
<td>13</td>103
<td>312</td>104
<td><div class="checkbox">105
<label>106
<input type="checkbox">107
</label>108
</div></td>109
</tr>110
<tr>111
<td>Tiger Nixon</td>112
<td>DEF</td>113
<td>13</td>114
<td>312</td>115
<td>13</td>116
<td>312</td>117
<td>13</td>118
<td>312</td>119
<td>13</td>120
<td>312</td>121
<td>13</td>122
<td>312</td>123
<td>13</td>124
<td>312</td>125
<td>312</td>126
<td>13</td>127
<td>312</td>128
<td>312</td>129
<td>13</td>130
<td>312</td>131
<td><div class="checkbox">132
<label>133
<input type="checkbox">134
</label>135
</div></td>136
</tr>137
<tr>138
<td>Tiger Nixon</td>139
<td>DEF</td>140
<td>13</td>141
<td>312</td>142
<td>13</td>143
<td>312</td>144
<td>13</td>145
<td>312</td>146
<td>13</td>147
<td>312</td>148
<td>13</td>149
<td>312</td>150
<td>13</td>151
<td>312</td>152
<td>312</td>153
<td>13</td>154
<td>312</td>155
<td>312</td>156
<td>13</td>157
<td>312</td>158
<td><div class="checkbox">159
<label>160
<input type="checkbox">161
</label>162
</div></td>163
</tr>164
<tr>165
<td>Tiger Nixon</td>166
<td>DEF</td>167
<td>13</td>168
<td>312</td>169
<td>13</td>170
<td>312</td>171
<td>123</td>172
<td>312</td>173
<td>13</td>174
<td>312</td>175
<td>13</td>176
<td>312</td>177
<td>13</td>178
<td>322</td>179
<td>312</td>180
<td>13</td>181
<td>32132</td>182
<td>312</td>183
<td>13</td>184
<td>312</td>185
<td><div class="checkbox">186
<label>187
<input type="checkbox">188
</label>189
</div></td>190
</tr>191
</tbody>192
</table>193
</div>194
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.