JavaScript create div with mouseover don't work

rubyonrails-talk
1

I’m trying to create some kind of toolkit for my index action in Rails 7. I would like a new div to appear when the mouse hovers over a specific cell in the table but it does not work. I have tried many things, but every time I move the cursor over a cell, a div appears but only with a white background (no data) and it does not disappear when I move the cursor outside the cell. I don’t see any errors in debug console. Below is my code

details.js

document.addEventListener('turbo:load', function() {
        document.querySelector('td[dataTooltip]').addEventListener('mouseenter', function(event) {
      let target = event.target;
      let existingTooltip = target.querySelector('.tooltip-text');
      if(!existingTooltip){
        const tooltipText = document.createElement('div');
        tooltipText.className = 'tooltip-text';
        const toolTipStr = target.getAttribute('dataTooltip');
        tooltipText.innerHTML = toolTipStr;
        target.classList.add('tooltip');
        target.appendChild(tooltipText);
      }
    });
    document.querySelector('td[dataTooltip]').addEventListener('mouseleave', function(event) {
            let target = event.target;
            let existingTooltip = target.querySelector('.tooltip-text');
            if(existingTooltip){
      const tooltipText = target.querySelector('.tooltip-text');
      if (tooltipText) {
        tooltipText.remove();
      }
            }
    });

});

.css

.tooltip .tooltip-text {
       visibility: hidden;
       background-color: #555;
       color: #fff;
       text-align: left;
       border-radius: 10px;
       padding: 10px;
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       opacity: 0;
       transition: opacity 0.3s;
       width: auto;
       max-width: 300px;
}

.tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
}

index.html.erb

<table class="table bg-transparent table-test" style="width:70%">
<tbody>
        <% @systems.each_with_index do |system, index| %>
          <tr>
            <td><%= index.to_i + 1 %></td>
            <td><%= system.name %></td>
            <td><%= system.rsi %></td>
            <td><%= system.display_rpo %></td>
            <td><%= system.display_rto %></td>
            <td><%= system.resourse_type %></td>
            <td dataTooltip="<table><tr><td><%= system.crit_start %></td></tr><tr><td><%= system.crit_stop %></td></tr></table>"><%= system.display_critical %></td>
            <td><%= system.display_all_week %></td>
            <td>
              <%= link_to 'Details', admin_system_path(system), class: 'btn btn-sm details-button' %>
              <%= link_to 'Edit', edit_admin_system_path(system), class: 'btn btn-sm update-user' %>
              <%#= link_to 'Delete', admin_user_path(user), method: :delete, data: {turbo_method: :delete}, class: 'btn btn-sm delete-user' %>
            </td>
          </tr>
        <% end %>
        </tbody>
</table>

application.js

import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import "./select"
import "./working"
import "./cell"
import "./details"

Can you please help with this?