html - 始终在包含潜水的相同位置显示工具提示
问题描述
当我将鼠标悬停在第一个 div 上时,工具提示显示得比我悬停在以下两个 div 上时更远。显然这是因为 div 内的文本更大/更长。但我不想显示工具提示跨度不取决于悬停文本,而是与文本的包含 div 相关,因此它始终显示在同一位置。
jQuery 不是任何东西的选择,但我有点认为,无论如何它是一个 CSS 问题。
.subPhaseContainer {
float: left;
margin: 0 auto;
}
.projectItem {
margin: 4px;
border: 2px solid black;
cursor: pointer;
height: 17px;
}
.projectItem.green {
background-color: green;
color: white;
}
.projectNumber {
position: relative;
display: inline-block;
width: 80px;
}
.projectNumber .tooltiptext {
visibility: hidden;
width: fit-content;
text-align: left;
padding: 5px;
top: -1px;
position: absolute;
z-index: 1;
margin-left: 34px;
transition: opacity 0.3s;
border: 1px solid black;
}
.projectNumber .tooltiptext::after {
content: "";
position: absolute;
top: 20%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.projectNumber:hover .tooltiptext.green {
background-color: green;
color: white;
visibility: visible;
opacity: 1;
}
.projectNumber:hover .tooltiptext.yellow {
background-color: yellow;
visibility: visible;
opacity: 1;
}
.projectNumber:hover .tooltiptext.red {
background-color: red;
color: white;
visibility: visible;
opacity: 1;
}
<div class="subPhaseContainer">
<div class="projectItem green">
<div class="projectNumber"><span>AAAA-00</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
<div class="projectItem green">
<div class="projectNumber">
<span>BBB-11</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
<div class="projectItem green">
<div class="projectNumber">
<span>CCC-22</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
</div>
解决方案
您需要为您的工具提示文本跨度指定“左”或“右”位置,否则它的左/右位置将与您保持工具提示文本跨度相对定位时的位置相同。
因此,只需将工具提示文本的 CSS 更新为:
.projectNumber .tooltiptext {
visibility: hidden;
width: fit-content;
text-align: left;
padding: 5px;
top: -1px;
right: -100%;
position: absolute;
z-index: 1;
margin-left: 34px;
transition: opacity 0.3s;
border: 1px solid black;
}
推荐阅读
- jenkins-pipeline - Jenkinsfile 未终止的带引号的字符串
- c++ - std::cout 输出 int 的编译错误
- java - 在两个表的条件下在休眠中批量插入
- excel - 在多个文件(文件夹内)中仅替换一列中的字符
- python - AWS beanstalk worker 实例部署错误:没有模块,没有属性
- java - 在 IntelliJ IDEA 中并行运行测试用例
- java - 负责数据库上的 CRUD 操作的类的最佳设计是什么?
- salesforce - MuleSoft Salesforce Upsert 连接器是否支持 allOrNone?
- c++ - 使用随机值运行测试有时会因 SIGABT 崩溃。如何在c ++中暴露超出数组范围的错误
- python - 使用返回 True/False 的 if 语句而不是直接将条件表达式转换为 bool 的技术原因