如何使Tooltip覆盖层高度适配文本而非父元素

问题：实现的Tooltip（.extra-info）在父元素上方显示时，边框盒尺寸和父元素一致（父元素仅一行高），文本虽能完整显示但溢出边框盒。希望不用手动设置高度，实现height:auto的动态适配效果。

原始HTML代码 #

<div class="info">
  <span>Skill</span>
  <span class="icon-info-sign"></span>
  <span class="extra-info">
    A little column extra info. Aaand just a little bit more for the trees and dogs and when it snows the roads get space raced into alien spaceships running for governor in the rural seas of the far off west
  </span>
  <input id ="initialSkill"/><input id="currentSkill"/><br>
</div>

原始CSS代码 #

.info {
  position: relative;
  font-size: 20px;
  padding-left: 5px;
  border-radius: 15px;
}

.extra-info {
  display: none;
  background-color: white;
  border: 1px solid gray;
  /*line-height: 30px;*/
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 350px;
}

.info:hover .extra-info {
  display: block;
}

.info:hover {
  background-color: white;
  /*padding: 0 0 0 5px;*/
  text-align: left !important;
}

.icon-info-sign{
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('./images/info.png');
  background-size: cover;
  background-color: #eee;
}

当前效果说明 #

Tooltip的边框盒高度与父元素（.info）一致，文本内容超出边框范围显示。

解决方案 #

问题核心在于.extra-info同时设置了top:0; left:0; right:0; bottom:0;，这会让绝对定位元素的尺寸被父元素的边界完全限制，高度固定为父元素的高度，无法随内容自动调整。

修改.extra-info的定位属性，去掉right和bottom，并调整top值让Tooltip显示在父元素上方，具体代码如下：

.extra-info {
  display: none;
  background-color: white;
  border: 1px solid gray;
  font-size: 12px;
  position: absolute;
  /* 移除right和bottom，让高度随内容自适应 */
  top: calc(-100% - 8px); /* 向上偏移父元素高度+自定义间距，显示在父元素上方 */
  left: 0;
  z-index: 100;
  width: 350px;
  padding: 8px; /* 可选：添加内边距优化文本与边框的间距 */
}

修改说明： #

• 移除right和bottom属性后，绝对定位元素的高度会根据内部文本自动计算，实现height:auto的动态适配效果。
• calc(-100% - 8px)的top值让Tooltip完全显示在父元素上方，避免与父元素重叠（8px为自定义间距，可按需调整）。
• 可选添加padding属性，提升Tooltip的视觉舒适度。

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