Stack Overflow如何显示问题的工具提示？

<span title="这是一个工具提示">鼠标悬停在这里查看工具提示</span>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:hover::before {
  content: "这是一个工具提示";
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-size: 0.8em;
  white-space: nowrap;
  z-index: 1000;
}

<span class="tooltip">鼠标悬停在这里查看工具提示</span>

const tooltip = document.createElement("div");
tooltip.innerText = "这是一个工具提示";
tooltip.style.position = "absolute";
tooltip.style.top = "-1.5em";
tooltip.style.left = "50%";
tooltip.style.transform = "translateX(-50%)";
tooltip.style.background = "#333";
tooltip.style.color = "#fff";
tooltip.style.padding = "0.5em 1em";
tooltip.style.borderRadius = "0.5em";
tooltip.style.fontSize = "0.8em";
tooltip.style.whiteSpace = "nowrap";
tooltip.style.zIndex = "1000";
tooltip.style.display = "none";

const element = document.querySelector(".tooltip");
element.addEventListener("mouseover", () => {
  tooltip.style.display = "block";
});

element.addEventListener("mouseout", () => {
  tooltip.style.display = "none";
});

document.body.appendChild(tooltip);

<span class="tooltip">鼠标悬停在这里查看工具提示</span>