Showing div with info while hovering a table does not work

Question

I have a tal template that draws a table, but the function that shows a cell header when hovering doesn't work.

This is my code:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div> <div class="container" tal:repeat="machine_result item.items()"> <button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/> <div class="collapse container" id="${machine_result[0]}_div"> <table class="table table-hover table-sm table-responsive table-bordered"> <tr tal:repeat="tuple machine_result[1].get('return')"> <th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/> <td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/> </tr> </table> </div> </div> </div> <script> $(document).ready(function(){ $("#multi_host_filter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("table tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); $("td").on({ mouseenter: function(e){ var $cell = $(this); var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html(); var paragraph = '<p>' + headerVal + '</p>'; $('#floating_div').html(paragraph); $('#floating-div').stop(true); $('#floating_div').css({left: e.pageX, top: e.pageY}); $('#floating_div').width(150); $('#floating_div').css('z-index', 4000); $('#floating_div').height(40); }, mouseleave: function(e){ $('#floating_div').css('z-index', -4000); $('#floating-div').css('display', 'none'); }, }); </script> 

I have already tried $('table').hover(function(){//something} , function(){//something when leave}) but div is not hidden when i leave table

"#floating-div" is already created at index.html, and i can modify it from this script Any idea?

Answer 1

When looking over your code, for the most part it seems to be exactly what you are trying to accomplish -- the table was a bit wonky in how it was formatted ( open and close THs and TDs <th>...</th> and <td>...</td> -- but I'm also not familiar with tal templates ).

But reducing your code to the minimums and reusing a lot of it, I generated the below solution.

The only other real edit is that I added in a mouseleave() event on the #floating_div , populating the div immediately underneath the cursor can cause cursor-confusion. Where it thought it was sitting on top of a <td> it is now suddenly sitting on top of a #floating_div . So, "leaving" the <td> doesn't work. This is because the cursor is now on top of something else and will leave that.

 $("td").on({ mouseenter: function(e){ //console.log( 'in', this ); let output = $(this).closest("table").find("tr > th").eq($(this).index()).html(); $('#floating_div').html( output ); $('#floating_div').removeClass('hidden'); $('#floating_div').css({left: e.pageX, top: e.pageY}); }, mouseleave: function(e){ //console.log( 'out', this ); $('#floating_div').addClass('hidden'); }, }); $('#floating_div').mouseleave( function(){ $(this).addClass('hidden'); }); 

 *{ margin: 0; padding: 0; font-family: Arial, sans-serif; } table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); } #floating_div{ position: absolute; top: 0; left: 0; padding: 15px; display: block; background-color: rebeccapurple; color: white; pointer-events: none; } #floating_div.hidden{ display: none; top: -1000px; left: -1000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>header 1</th> <th>header 2</th> </tr> <tr> <td>data 1</td> <td>data 2</td> </tr> </table> <div id="floating_div" class="hidden"></div>