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"><tow 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: 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></tr></tman><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></tr><tr><tr><td></td><tr><tr><td></td><tr><tr><tr></td><tr><tr role="row"><td>3</td><td>Alare</td><td>Alare</td><td>Alare</td><td>Alare</td><td>Alare</td><td></td></tr></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 above is the full content of this grid based on JS code that the editor introduced to you when the mouse hovering table is displayed. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!