Search code examples
csstooltipoverlay

Make tooltip overlay div height same as text not parent

I'm implementing a tool tip that shows over the parent element but when the tooltip(extra-info) is displayed the border box is the same size as the parent which in this case is only a single line tall. The text all shows but it flows outside of the border box. If I set the height manually it does indeed resize, but I was hoping to make more dynamic and act like auto should.

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

And the 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;
  }

overlay div

Solution

  • If you meant to have the text displayed inside the div, just remove the right:0, bottom: 0. It doesn't need four placements for absolute positioning.

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