La survolée provoque l'expansion de la div principale

Question

J'essaie d'avoir une fenêtre contextuelle lorsque je survole une div. Il fonctionne correctement, je pense, sauf que le div appelant le popup se développe en taille à quel que soit le popup. Voici mon jsfiddle.

J'ai placé une bordure autour de la div principale. Lorsque vous passez la souris sur le texte, vous verrez comment cette div se développe. Y at-il un moyen de ne pas avoir sa hauteur affectée? Aussi, j'ai adapté ce code de here.

Je ne comprends pas le but de #dsspan:after. Si je l'enlève complètement, rien ne semble changer. Peut-être que je ne l'ai pas configuré correctement et il cause ce problème?

Voici mon code:

<style> 
    #dsspan{ 
    background: none repeat scroll 0 0 #F8F8F8; 
    border: 5px solid #DFDFDF; 
    color: #717171; 
    font-size: 13px; 
    height: auto; 
    width:auto; 
    letter-spacing: 1px; 
    line-height: 30px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    top: -80px; 
    left:-30px; 
    display:none; 
    padding:0 20px; 
    } 
    #dsspan:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    height:0px; 
    }  
    .ds:hover #dsspan { display:block; } 
    </style> 

    <div class="ds"> 
     <span id="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> 
     <a href="example.com">Hover Here</a> 
    </div> 

Answer 1

Vous pouvez la position votre conteneur dspanabsolument par rapport au conteneur ds (positionnérelative). Cela garantit que le height du conteneur ds` ne changera pas lorsque vous planerez dessus.

Je ne comprends pas le but de #dsspan: après

Je suppose que ce produit a été conçu pour la petite flèche de l'info-bulle - voir la démo ci-dessous:

#dsspan { 
 
    background: none repeat scroll 0 0 #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: 0 20px; 
 
} 
 

 
#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; 
 
}

<div class="ds"> 
 
    <span id="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> 
 
    <a href="example.com">Hover Here</a> 
 
</div>

Answer 2

Modifier la position #dsspan de relative à absolute. Placez le bloc entier à l'intérieur d'un conteneur de position relative.

::after crée un pseudo-élément qui est le dernier enfant de l'élément sélectionné. Il n'a pas d'utilisation ici. Découvrez ce link.

.container { 
 
     margin-top:50px; 
 
     position:relative 
 
    } 
 
    
 
    #dsspan{ 
 
    background: none repeat scroll 0 0 #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:0 20px; 
 
    } 
 
    
 
    .ds:hover #dsspan { display:block; }

<div class="container"> 
 
    <div class="ds"> 
 
     <span id="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> 
 
     <a href="example.com">Hover Here</a> 
 
    </div> 
 
    </div>