使工具提示覆盖 div 高度与文本非父级相同

Question

我正在实现一个显示在父元素上的工具提示，但是当显示工具提示（额外信息）时，边框框的大小与父元素相同，在本例中只有一行高。文本全部显示，但它超出了边框框。如果我手动设置高度，它确实会调整大小，但我希望变得更加动态并且像自动一样。

    <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;
  display: none;
  /*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;
  }

Answer 1

如果你想让文本显示在div内，只需删除right:0，bottom:0即可。绝对定位不需要四个位置。

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

.extra-info {
  display: none;
  background-color: white;
  border: 1px solid gray;
  display: none;
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 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;
  }

<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>