如何为数组中的每个元素设置唯一的悬浮提示描述？

核心思路是把名称和对应的描述绑定成对象数组，遍历数组时给每个生成的元素单独设置悬浮提示（原生用title属性，框架里用绑定语法）。以下是几种常见场景的实现代码：

原生HTML + JavaScript #

直接遍历对象数组，动态生成带独立title的元素：

<div id="nameList"></div>

<script>
// 存储名称与对应描述的数组
const namesWithDesc = [
  { name: "张三", desc: "前端开发工程师，擅长React" },
  { name: "李四", desc: "后端开发工程师，精通Java" },
  { name: "王五", desc: "UI设计师，专注用户体验设计" }
];

const container = document.getElementById('nameList');

namesWithDesc.forEach(item => {
  const nameSpan = document.createElement('span');
  nameSpan.textContent = item.name;
  nameSpan.title = item.desc; // 每个元素设置专属描述
  nameSpan.style.marginRight = '15px';
  container.appendChild(nameSpan);
});
</script>

React 实现 #

通过数组遍历渲染，给每个元素绑定对应的title：

function NameList() {
  const namesWithDesc = [
    { name: "张三", desc: "前端开发工程师，擅长React" },
    { name: "李四", desc: "后端开发工程师，精通Java" },
    { name: "王五", desc: "UI设计师，专注用户体验设计" }
  ];

  return (
    <div>
      {namesWithDesc.map((item, idx) => (
        <span 
          key={idx} 
          title={item.desc} 
          style={{ marginRight: '15px' }}
        >
          {item.name}
        </span>
      ))}
    </div>
  );
}

Vue 实现 #

利用v-for循环，通过:title绑定每个元素的专属描述：

<template>
  <div>
    <span 
      v-for="(item, idx) in namesWithDesc" 
      :key="idx" 
      :title="item.desc"
      style="margin-right: 15px"
    >
      {{ item.name }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      namesWithDesc: [
        { name: "张三", desc: "前端开发工程师，擅长React" },
        { name: "李四", desc: "后端开发工程师，精通Java" },
        { name: "王五", desc: "UI设计师，专注用户体验设计" }
      ]
    };
  }
};
</script>

如果需要自定义悬浮提示的样式（比如修改字体、背景），可以用CSS的:hover伪类结合::after伪元素，或者通过JS监听鼠标事件显示自定义弹窗，不过原生title属性是最轻量化的实现方式。

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