Hover Popup Causes Main Div To Expand

I'm trying to have a popup appear when hovering over a div. It is working properly, I think, except that the div calling the popup expands in size to whatever the popup is. Here is

Solution 1:

You can position your dspan container absolutely with respect to the ds container (positionedrelative). This ensures that the height of the ds container` will not change when you hover over it.

I don't understand the purpose of #dsspan:after

I guess that was intended for the small arrow of the tooltip - see demo below:

#dsspan {
  background: none repeat scroll 00#F8F8F8;
  border: 5px solid #DFDFDF;
  color: #717171;
  font-size: 13px;
  height: auto;
  width: auto;
  letter-spacing: 1px;
  line-height: 30px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 30px;
  left: 30px;
  display: none;
  padding: 020px;
}

#dsspan:before {
  content: '';
  position: absolute;
  top: -10px;
  height: 10px;
  width: 10px;
  border-top: 5px solid #dfdfdf;
  border-left: 5px solid #dfdfdf;
  background: #f8f8f8;
  left: 50%;
  margin-left: -10px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ds {
  border: 1px solid red;
  position: relative;
}

.ds:hover#dsspan {
  display: block;
}

<divclass="ds"><spanid="dsspan">
   This line is longer than the rest.
   <ul><li>Text</li><li>Text</li><li>Text</li><li>Text</li><li>Text</li></ul></span><ahref="example.com">Hover Here</a></div>

Solution 2:

Change #dsspan position from relative to absolute. Place the whole block inside a relative position container.

::after creates a pseudo-element that is the last child of the selected element. It doesn't have use here. Check out this link.

.container {
      margin-top:50px;
      position:relative
    }
    
    #dsspan{
     background: none repeat scroll 00#F8F8F8;
     border: 5px solid #DFDFDF;
     color: #717171;
     font-size: 13px;
     height: auto;
     width:auto;
     letter-spacing: 1px;
     line-height: 30px;
     margin: 0 auto;
     position: absolute;
     text-align: center;
     text-transform: uppercase;
     top: 0px;
     left:0px;
     display:none;
     padding:020px;
    }
  
    .ds:hover#dsspan { display:block; }

<divclass="container"><divclass="ds"><spanid="dsspan">
       This line is longer than the rest.
       <ul><li>Text</li><li>Text</li><li>Text</li><li>Text</li><li>Text</li></ul></span><ahref="example.com">Hover Here</a></div></div>