如何将三个关联ID对应的数值显示为悬停文本？

一、后端数据准备 #

首先要通过联表查询，一次性获取三个关联ID对应的所有数值，避免前端多次请求。假设三个关联表结构为：表A（含ID1及对应数值Val1）、表B（含ID2、关联ID1的外键及对应数值Val2）、表C（含ID3、关联ID2的外键及对应数值Val3），SQL查询示例如下：

SELECT 
  a.id AS id1, a.value AS val1,
  b.id AS id2, b.value AS val2,
  c.id AS id3, c.value AS val3
FROM table_a a
LEFT JOIN table_b b ON a.id = b.id1_fk
LEFT JOIN table_c c ON b.id = c.id2_fk
-- 这里添加你的查询条件
WHERE ...

查询后将每条数据的三个ID和对应数值一起返回给前端。

二、前端悬停文本实现 #

1. 原生title属性（快速实现）

直接给显示ID的元素添加title属性，把三个数值拼接成提示内容：

<!-- 以模板引擎渲染为例，假设后端返回数据存在item对象中 -->
<span title="数值1: {{item.val1}} | 数值2: {{item.val2}} | 数值3: {{item.val3}}">{{item.id1}}</span>
<span title="数值1: {{item.val1}} | 数值2: {{item.val2}} | 数值3: {{item.val3}}">{{item.id2}}</span>
<span title="数值1: {{item.val1}} | 数值2: {{item.val2}} | 数值3: {{item.val3}}">{{item.id3}}</span>

如果是纯原生JS渲染，可通过DOM操作设置：

// 假设已获取DOM元素和数据对象data
const idElement = document.querySelector('.target-id');
idElement.title = `数值1: ${data.val1} | 数值2: ${data.val2} | 数值3: ${data.val3}`;

2. 自定义样式悬停框（美观可控）

如果需要更美观的提示样式，用CSS+HTML实现自定义悬停框：

<div class="hover-wrapper">
  <span class="id-display">{{item.id1}}</span>
  <div class="custom-tooltip">
    <p>数值1: {{item.val1}}</p>
    <p>数值2: {{item.val2}}</p>
    <p>数值3: {{item.val3}}</p>
  </div>
</div>

搭配CSS样式：

.hover-wrapper {
  position: relative;
  display: inline-block;
}
.custom-tooltip {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c3e50;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  display: none;
  z-index: 999;
}
.hover-wrapper:hover .custom-tooltip {
  display: block;
}

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