在D3中非嵌套添加标签，为每个<p>标签生成带Tooltip的HTML

没问题！既然你更熟悉CSS来实现Tooltip效果，那咱们就结合D3来生成你想要的非嵌套独立

标签结构，每个

里都自带Tooltip文本。下面一步步来实现：

先写好Tooltip的基础样式，hover时就能正常显示提示框，你可以根据需求调整颜色、位置、尺寸这些细节：

/* 给包含Tooltip的p标签设置相对定位，作为Tooltip的参照容器 */
.tooltip {
  position: relative;
  display: inline-block; /* 按内容宽度排列，改成block可以让每个p占一行 */
  cursor: help;
  margin: 10px 0;
}

/* Tooltip文本容器，默认隐藏 */
.tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #2d2d2d;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 6px 0;
  position: absolute;
  z-index: 100;
  bottom: 130%; /* 把Tooltip放在p标签上方 */
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* hover时显示Tooltip */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

假设你有一组包含主文本和Tooltip内容的数据，我们用D3遍历数据，逐个生成带Tooltip的

标签：

// 示例数据：替换成你自己的业务数据
const tooltipData = [
  { text: "eyes.", tooltip: "Tooltip text for eyes" },
  { text: "eyes.", tooltip: "filler text&l..." },
  { text: "mouth.", tooltip: "Tooltip content for mouth" }
];

// 选择要挂载这些p标签的容器（比如body或某个指定div）
d3.select("body")
  .selectAll("p.tooltip")
  .data(tooltipData)
  .enter()
  // 创建每个p标签，添加类名和字体样式
  .append("p")
  .attr("class", "tooltip")
  .style("font-size", "73.6207pt")
  // 添加p标签的主文本内容
  .text(d => d.text)
  // 给每个p标签追加Tooltip文本的span元素
  .append("span")
  .attr("class", "tooltiptext")
  .text(d => d.tooltip);

// 如果需要在每个p标签后加换行，执行这行代码
d3.select("body").selectAll("p.tooltip").append("br");

运行代码后，会生成和你需求一致的HTML结构：

<p class="tooltip" style="font-size: 73.6207pt;">eyes. <span class="tooltiptext">Tooltip text for eyes</span><br></p>
<p class="tooltip" style="font-size: 73.6207pt;">eyes. <span class="tooltiptext">filler text&l...</span><br></p>
<p class="tooltip" style="font-size: 73.6207pt;">mouth. <span class="tooltiptext">Tooltip content for mouth</span><br></p>

这样每个

都是独立非嵌套的，hover时就能通过CSS触发显示对应的Tooltip文本啦！

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