html - Hover popup causes main div to expand -


i'm trying have popup appear when hovering on div. working properly, think, except div calling popup expands in size whatever popup is. here jsfiddle.

i placed border around main div. when mouse on text, see how div expands. there way not have height affected? also, adapted code here.

i don't understand purpose of #dsspan:after. if remove nothing seems change. maybe don't have setup correctly , causing problem?

here's 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">        line longer 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>  

you can position dspan container absolutely respect ds container (positioned relative). ensures height of ds container` not change when hover on it.

i don't understand purpose of #dsspan:after

i guess intended small arrow of tooltip - see demo below:

#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">     line longer 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>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -