在Stack Overflow中,显示问题的工具提示可以通过以下几种方式实现:
title
属性:在需要显示工具提示的元素上添加title
属性,例如:
<span title="这是一个工具提示">鼠标悬停在这里查看工具提示</span>
:hover
伪类和::before
或::after
伪元素:.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>
这些方法可以实现在Stack Overflow中显示问题的工具提示。
Elastic 实战工作坊
Elastic 实战工作坊
Elastic 中国开发者大会
云原生安全实战加速仓
Elastic 中国开发者大会
云+社区技术沙龙[第2期]
视频云直播活动
云+社区技术沙龙[第25期]
企业创新在线学堂
云+社区技术沙龙[第28期]
高校公开课