Rails中表格单元格鼠标悬停显示Div失效问题排查

你的tooltip功能失效是多个细节问题共同导致的，逐个解决即可：

1. TagName大小写匹配错误（核心无响应原因） #

DOM元素的tagName属性返回大写字符串（比如TD而非td），你原代码中用小写'td'做判断，会导致循环无法匹配到目标单元格，始终找不到符合条件的td，直接跳过tooltip创建逻辑：

// 错误写法：
while (target && target.tagName !== 'td') { ... }

// 修复为：
while (target && target.tagName !== 'TD') { ... }

2. JavaScript拼写错误 #

mouseout事件中删除元素的方法拼写错误，导致tooltip无法被清理，后续触发时因检测到元素存在而跳过创建：

// 错误写法：
tooltipText.romove();

// 修复为：
tooltipText.remove();

3. 事件类型选择不当 #

mouseover/mouseout会因事件冒泡反复触发（比如鼠标在tooltip内部表格移动时），导致逻辑混乱或闪烁。替换为不会冒泡的mouseenter/mouseleave，仅在鼠标进入/离开单元格时触发一次：

// 替换mouseover为mouseenter
table.addEventListener('mouseenter', function(event) { ... });

// 替换mouseout为mouseleave
table.addEventListener('mouseleave', function(event) { ... });

4. DOM选择器局限性 #

document.querySelector('table')仅选中页面第一个表格，若index页面有多个表格，其他表格的单元格无法触发tooltip。改为遍历所有表格绑定事件：

document.querySelectorAll('table').forEach(table => {
  // 绑定mouseenter/mouseleave事件
});

5. CSS布局冲突 #

.tooltip类中的display: inline-block会将单元格从table-cell改为行内块，破坏表格布局，且完全没必要——仅保留position: relative即可让tooltip基于单元格定位：

.tooltip {
  position: relative;
  /* 移除display: inline-block */
}

6. HTML属性规范优化（可选） #

HTML的data属性应遵循小写连字符命名规范，将dataTooltip改为data-tooltip，同时同步修改JS中的属性检测逻辑：

<td data-tooltip="<table><tr><td><%= some.data %></td></tr><tr><td><%= some.data2 %></td></tr></table>">
  <%= some.data3 %>
</td>

// 对应修改JS逻辑
if (target && target.hasAttribute('data-tooltip')) {
  tooltipText.innerHTML = target.getAttribute('data-tooltip');
}

修复后的完整代码示例 #

JavaScript #

document.addEventListener('turbo:load', function() {
  document.querySelectorAll('table').forEach(table => {
    table.addEventListener('mouseenter', function(event) {
      let target = event.target;
      while (target && target.tagName !== 'TD') {
        target = target.parentElement;
      }

      if (target && target.hasAttribute('data-tooltip')) {
        if (!target.querySelector('.tooltip-text')) {
          const tooltipText = document.createElement('div');
          tooltipText.className = 'tooltip-text';
          tooltipText.innerHTML = target.getAttribute('data-tooltip');
          target.classList.add('tooltip');
          target.appendChild(tooltipText);
        }
      }
    });

    table.addEventListener('mouseleave', function(event) {
      let target = event.target;
      while (target && target.tagName !== 'TD') {
        target = target.parentElement;
      }

      if (target && target.hasAttribute('data-tooltip')) {
        const tooltipText = target.querySelector('.tooltip-text');
        if (tooltipText) {
          tooltipText.remove();
          target.classList.remove('tooltip');
        }
      }
    });
  });
});

CSS #

.tooltip {
  position: relative;
}

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

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

.tooltip .tooltip-text table {
  width: 100%;
  border-collapse: collapse;
}

.tooltip .tooltip-text table,
.tooltip .tooltip-text td,
.tooltip .tooltip-text th {
  border: 1px solid #ddd;
  padding: 8px;
}

.tooltip .tooltip-text th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #333;
  color: white;
}

HTML（Rails ERB） #

<table>
  <tr>
    <td data-tooltip="<table><tr><td><%= some.data %></td></tr><tr><td><%= some.data2 %></td></tr></table>">
      <%= some.data3 %>
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者mila002