Отображение div с информацией при наведении на таблицу не работает

Question

У меня есть шаблон tal, который рисует таблицу, но функция, которая показывает заголовок ячейки при наведении, не работает.

Это мой код:

<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>

Я уже пробовал $ ('таблица'). Hover (function () {// что-то} , function () {// что-то при выходе}), но div не скрывается, когда я покидаю таблицу

"# плавающий-div" уже создан в index.html, и я могу изменить его из этого скрипта Есть идеи?

Answer 1

Когда вы просматриваете ваш код, по большей части это кажется именно тем, что вы пытаетесь выполнить - таблица была немного вялой в том, как она была отформатирована (открывать и закрывать TH и TD <th>...</th> и <td>...</td> - но я также не знаком с шаблонами Tal).

Но, сократив ваш код до минимума и повторно использовав его, я создал следующее решение.

Единственное другое реальное редактирование - это то, что я добавил в событие mouseleave() на #floating_div, заполнение div непосредственно под курсором может вызвать путаницу с курсором. Там, где он думал, что он сидит на вершине <td>, теперь он внезапно сидит на вершине #floating_div. Таким образом, «уход» <td> не работает. Это потому, что курсор теперь находится над чем-то другим и оставит это.

$("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>