悬停指定元素时自定义HTML/CSS tooltip无法显示问题求助

问题原因&修复方案 #

你代码里有两个语法错误，修改后即可正常显示tooltip：

• .tooltip .tooltiptext的position属性配置错误：你当前写的是position: relative，tooltip需要相对于父级.tooltip定位，必须修改为position: absolute。如果使用相对定位，bottom、left偏移属性不会按预期相对于父元素计算，也无法脱离常规文档流，导致显示异常。
• 悬停伪类写法错误：你写的.tooltip::hover .tooltiptext用了双冒号，hover属于CSS伪类，应该用单冒号.tooltip:hover .tooltiptext才会正确触发悬停逻辑，双冒号是用于伪元素（如::after/::before）的标识。

修正后完整CSS代码 #

#upgradeOne {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* 这里修改为absolute */
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
/* 这里把::hover修改为:hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

你的HTML代码无需修改，替换CSS即可正常实现悬停显示tooltip的效果。

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