可以通过使用JavaScript和CSS来实现。以下是一种实现方式:
<span>
标签来创建一个容器,并为其设置一个唯一的ID,如下所示:<span id="tooltip1">Element 1</span>
<span id="tooltip2">Element 2</span>
position
属性来设置工具提示的位置,并设置display
属性为none
来隐藏它们,如下所示:.tooltip {
position: relative;
display: none;
}
addEventListener
函数来为元素添加事件监听器,并在鼠标悬停和离开时显示和隐藏工具提示,如下所示:var tooltip1 = document.getElementById("tooltip1");
var tooltip2 = document.getElementById("tooltip2");
tooltip1.addEventListener("mouseover", function() {
showTooltip(tooltip1);
});
tooltip1.addEventListener("mouseout", function() {
hideTooltip(tooltip1);
});
tooltip2.addEventListener("mouseover", function() {
showTooltip(tooltip2);
});
tooltip2.addEventListener("mouseout", function() {
hideTooltip(tooltip2);
});
function showTooltip(tooltip) {
tooltip.style.display = "block";
}
function hideTooltip(tooltip) {
tooltip.style.display = "none";
}
这种方法可以让在HTML页面中的同一位置放置多个工具提示,并能通过鼠标悬停和离开来显示和隐藏它们。你可以根据自己的需求和喜好进行样式和交互的定制。
领取专属 10元无门槛券
手把手带您无忧上云