如何让CSS实现的Tooltip与父div同宽且不修改HTML结构

需求回顾 #

• 无法修改HTML结构，仅通过CSS实现Tooltip
• 使用position:absolute，Tooltip覆盖下方内容而非使其移位
• Tooltip宽度自动与#main元素一致，无需设置固定像素值

可行方案 #

核心思路是给#main添加相对定位作为Tooltip的定位上下文，再通过left:0+right:0让Tooltip自动继承父元素宽度，具体修改如下：

1. 给#main添加position: relative，让其成为伪元素的定位基准
2. 对#main:hover::after补充定位和宽度控制属性，同时可添加基础样式优化显示效果

修改后的完整代码 #

#main {
  height:50px;
  width:200px;
  background-color:red;
  display:inline-block;
  /*needs to be inline-block*/
  position: relative; /* 添加定位上下文 */
}
#secondary {
  height:50px;
  width:200px;
  background-color:yellow;
  display:inline-block;
}
#main:hover::after {
  content:"tips displayed";
  background-color:blue;
  color: #fff; /* 优化文字可读性 */
  position:absolute;
  display:block;
  left: 0; /* 左对齐父元素 */
  right: 0; /* 右对齐父元素，自动继承宽度 */
  top: 100%; /* 显示在#main下方 */
  padding: 8px; /* 增加内边距 */
  box-sizing: border-box; /* 确保内边距不超宽 */
}

<div id="main">content</div>
<div id="secondary">content</div>

方案说明 #

• position: relative给#main创建定位上下文，伪元素的绝对定位会相对于#main而非整个文档
• left:0+right:0的组合强制Tooltip宽度与#main完全一致，无论#main是固定宽度还是自适应宽度都能生效
• top:100%让Tooltip刚好显示在#main正下方，绝对定位属性保证它会覆盖下方的#secondary，不会导致页面内容移位
• box-sizing: border-box确保Tooltip的内边距不会额外增加宽度，避免超出#main范围

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