I want to implement such a function, because there are too many words in a table, so I use the method of overflowing text, but I cannot see the specific content in the table. I want to realize that when the mouse is moved up, the hidden content can be displayed in this line. Of course there are many plug-ins on this website, but I didn’t use it, so I wrote one myself.
CSS part
<style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "Microsoft Yahei"; border: 1px solid #3c8dbc; display: none; position: absolute; top: 0; left: 0; background-color: #fff; padding: 5px; } </style>html part
<table id="example1" role="grid"> <tear style="background-color: #E4E9F0;"> <tr role="row"> <th rowspan="2" style="text-align: center; width: 6%;" colspan="1"><font style="font-weight:bold;">Serial number</font></th> <th rowspan="2" style="text-align: center; width: 10%;" colspan="1"><font style="font-weight:bold;">Name</font></th> <th rowspan="2" style="text-align: center; width: 10%;" colspan="1"><font style="font-weight:bold;">Name</font></th> <th rowspan="2" style="text-align: Category</font></th> <th rowspan="2" style="text-align: center; width: 8%;" colspan="1"><font style="font-weight:bold;">Unit</font></th> <th rowspan="2" style="text-align: center; width: 26%;" colspan="1"><font style="font-weight:bold;">Achievement Requirements</font></th> <th colspan="2" style="text-align: center; " rowspan="1"><font style="font-weight:bold;">Progress</font></th></tr> <tr role="row"> <th style="text-align: center; width: 30%;" rowspan="1" colspan="1"><font style="font-weight:bold;">Latest progress</font></th> <th style="text-align: center; width: 10%;" rowspan="1" colspan="1"><font style="font-weight:bold;">Update time</font></th></tr> </tour> <tbody> <tr role="row"> <td>1</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare</td> <td>Alare </tbody></table><div id="showbox"></div>
js part
$(function() { function showBox(obj,box){ var timer = null; $(obj).on("mouseover", function (e) { clearTimeout(timer); var clientX = e.clientX; var clientY = e.clientY; var txt = $(this).text(); timer = setTimeout(function() { console.log(clientX, clientY); $(box).css("left", clientX).css("top", clientY); if (txt == "") { $(box).hide(); } else { $(box).show(); $(box).html(txt); } }, 1000); }); $(obj).on("mouseout",function(){ clearTimeout(timer); $(box).hide(); }); } showBox("#example1 > tbody td","#showbox"); });Finally, there is a component in bootstrap that can display the contents, but it shows the title. It will not change at the beginning. After someone wakes up, you can directly assign the title, which is just assigning the title to the text in the table.
The code that shows the entire content of this box when the mouse is moved to the table is the entire content shared by the editor. I hope it can give you a reference and I hope you can support Wulin.com more.