如何为共享sf-level-0类的列表项添加hover触发的Tooltip

下面是几种不用类选择器就能定位每个服务列表项，实现悬停显示Tooltip的方案，按需选择即可：

1. 利用Input的Value属性定位 #

每个列表项里的Input都有唯一的value值，通过属性选择器可以精准关联对应的Label，结合CSS伪元素实现Tooltip：

步骤： #

• 先给每个Label添加data-tooltip属性，存储Tooltip文本：

<label class="sf-label-checkbox" for="sf-input-e6bc565b2d96339dcf959e2a1e3561d8" data-tooltip="为成年人提供日间照料与活动支持">Adult Day Program Services</label>
<label class="sf-label-checkbox" for="sf-input-ffb6f68d490778d1cd1fc48061179fd8" data-tooltip="专业临床诊疗与康复服务">Clinical Services</label>
<!-- 其他Label同理添加对应data-tooltip -->

• 编写CSS样式：

/* 给Label设置相对定位，让Tooltip基于它定位 */
.sf-label-checkbox {
  position: relative;
  cursor: help;
}

/* 定义Tooltip基础样式 */
.sf-label-checkbox::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 999;
}

/* 悬停时显示Tooltip */
li:has(input[value="Adult Day Program Services"]) .sf-label-checkbox:hover::after,
li:has(input[value="Clinical Services"]) .sf-label-checkbox:hover::after,
/* 其他服务项依次添加 */
li:has(input[value="Technology"]) .sf-label-checkbox:hover::after {
  display: block;
}

2. 利用:nth-child()按顺序定位 #

如果列表项的顺序固定不会变动，可以用CSS的:nth-child(n)选择器按位置选中每个列表项：

.sf-label-checkbox {
  position: relative;
  cursor: help;
}

.sf-label-checkbox::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 999;
}

/* 第一个列表项的Tooltip */
li:nth-child(1) .sf-label-checkbox::after {
  content: "为成年人提供日间照料与活动支持";
}
li:nth-child(1) .sf-label-checkbox:hover::after {
  display: block;
}

/* 第二个列表项的Tooltip */
li:nth-child(2) .sf-label-checkbox::after {
  content: "专业临床诊疗与康复服务";
}
li:nth-child(2) .sf-label-checkbox:hover::after {
  display: block;
}

/* 其他列表项依次按:nth-child(n)添加 */

注意：如果后续列表项顺序调整，Tooltip会错位，适合结构固定的场景。

3. 利用Label的for属性定位 #

每个Label的for属性和对应Input的ID一一对应，通过属性选择器可以精准定位单个Label：

.sf-label-checkbox {
  position: relative;
  cursor: help;
}

.sf-label-checkbox::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 999;
}

/* 定位第一个服务项的Label */
label[for="sf-input-e6bc565b2d96339dcf959e2a1e3561d8"]::after {
  content: "为成年人提供日间照料与活动支持";
}
label[for="sf-input-e6bc565b2d96339dcf959e2a1e3561d8"]:hover::after {
  display: block;
}

/* 定位第二个服务项的Label */
label[for="sf-input-ffb6f68d490778d1cd1fc48061179fd8"]::after {
  content: "专业临床诊疗与康复服务";
}
label[for="sf-input-ffb6f68d490778d1cd1fc48061179fd8"]:hover::after {
  display: block;
}

/* 其他服务项依次按for属性添加 */

这种方法定位精准，只要Input的ID不修改就不会出错。

4. JavaScript通过文本内容动态添加Tooltip #

如果不想修改HTML结构，可以用JS获取Label的文本内容，匹配预设的Tooltip文本并绑定悬停事件：

// 预设各服务对应的Tooltip文本
const tooltipMap = {
  "Adult Day Program Services": "为成年人提供日间照料与活动支持",
  "Clinical Services": "专业临床诊疗与康复服务",
  "Community & Socialization": "社区融入与社交活动支持",
  "Education": "教育与技能培训服务",
  "Employment Support": "就业帮扶与职业支持",
  "Family Support": "家庭援助与支持服务",
  "Living Opportunities": "居住安置与生活支持",
  "Technology": "辅助技术与设备支持"
};

// 获取所有服务Label
const serviceLabels = document.querySelectorAll('.sf-label-checkbox');

serviceLabels.forEach(label => {
  const serviceName = label.textContent.trim();
  const tooltipText = tooltipMap[serviceName];
  
  if (tooltipText) {
    // 创建Tooltip元素
    const tooltipEl = document.createElement('span');
    tooltipEl.className = 'service-tooltip';
    tooltipEl.textContent = tooltipText;
    tooltipEl.style.cssText = `
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      display: none;
      z-index: 999;
    `;
    
    label.style.position = 'relative';
    label.appendChild(tooltipEl);
    
    // 绑定悬停事件
    label.addEventListener('mouseenter', () => {
      tooltipEl.style.display = 'block';
    });
    label.addEventListener('mouseleave', () => {
      tooltipEl.style.display = 'none';
    });
  }
});

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