Mouse over pop up boxes

You can see an example of the boxes that are created with the code on this page. Rent Lucky's Owner Page

On that page, there are three columns of information that users needed explanations on what they were so the easiest solution was to create pop up explanations. When I first created them they were really funky and not too pretty. Later I learned how to make them pretty. Because they are three different columns I had to do three different sections in the CSS.

/*Column 1 mouseover info popup box Owners Page */ 

.dropt {border-bottom: none;

    top:100px;

    left:50px; 

        background: none;}

.dropt:hover {text-decoration:none; 

              background: #ffffff; 

              z-index: 6; }

.dropt span {position: absolute; 

             left: -9999px;

             margin: 0 0 0 0;

                 border:5px solid #57951e;

                 background-color:#fff; color:#000;  0 0 no-repeat;

             padding: 18px 16px 23px 15px;

                 text-align: center; 

                z-index: 6;}

.dropt:hover span {left: 0%; 

        border:5px solid #57951e;

    background-color:#fff; color:#000;

    padding: 18px 16px 23px 15px;

    text-align: justify; } 

.dropt span {position: absolute; left: -9999px;

  margin: 0px 0 0 0px; padding: 3px 3px 3px 3px; 

  border-style:none; border-color:none; border-width:0px;}

.dropt:hover span {margin: 0 0 0 0;

    border:5px solid #57951e;

    background-color:#fff; color:#000;  0 0 no-repeat;

    padding: 18px 16px 23px 15px;

    text-align: center;

 z-index:6;}

.dropt:hover span:after{ /*the span will display just on :hover state*/

    content:'';

    position:absolute;

    top:-11px;

    width:10px;

    height:10px;

    border-bottom:5px solid #57951e;

    border-right:5px solid #57951e;

    background:#fff;  0 0 no-repeat;

    left:50%;

    margin-left:-5px;

    -moz-transform:rotate(135deg);

    -webkit-transform:rotate(135deg);

    transform:rotate(235deg);

    z-index:6;

  }

  /*Column 2 mouseover info popup box Owners Page */ 

.dropt2 {border-bottom: none;

    top:100px;

    left:50px; 

        background: none;}

.dropt2:hover {text-decoration:none; 

              background: #ffffff; 

              z-index: 6; }

.dropt2 span {position: absolute; 

             left: -9999px;

             margin: 0 0 0 350px;

                 border:5px solid #57951e;

                 background-color:#fff; color:#000;  0 0 no-repeat;

             padding: 18px 16px 23px 15px;

                 text-align: center; 

                z-index: 6;}

 .dropt2:hover span {left: 0%; 

        border:5px solid #57951e;

    background-color:#fff; color:#000;

    padding: 18px 16px 23px 15px;

    text-align: justify; } 

 .dropt2 span {position: absolute; left: -9999px;

  margin: 0 0 0 350px; padding: 3px 3px 3px 3px; 

  border-style:none; border-color:none; border-width:0px;}

 .dropt2:hover span {margin: 0 0 0 350px;

    border:5px solid #57951e;

    background-color:#fff; color:#000;  0 0 no-repeat;

    padding: 18px 16px 23px 15px;

    text-align: center;

 z-index:6;}

 .dropt2:hover span:after{ /*the span will display just on :hover state*/

    content:'';

    position:absolute;

    top:-11px;

    width:10px;

    height:10px;

    border-bottom:5px solid #57951e;

    border-right:5px solid #57951e;

    background:#fff;  0 0 no-repeat;

    left:50%;

    margin-left:-5px;

    -moz-transform:rotate(135deg);

    -webkit-transform:rotate(135deg);

    transform:rotate(235deg);

    z-index:6;

  }

/*Column 3 mouseover info popup box Owners Page */ 

.dropt3 {border-bottom: none;

    top:100px;

    left:50px; 

        background: none;}

.dropt3:hover {text-decoration:none; 

              background: #ffffff; 

              z-index: 6; }

.dropt3 span {position: absolute; 

             left: -9999px;

             margin: 0 0 0 650px;

                 border:5px solid #57951e;

                 background-color:#fff; color:#000;  0 0 no-repeat;

             padding: 18px 16px 23px 15px;

                 text-align: center; 

                z-index: 6;}

.dropt3:hover span {left: 0%; 

        border:5px solid #57951e;

    background-color:#fff; color:#000;

    padding: 18px 16px 23px 15px;

    text-align: justify; } 

.dropt3 span {position: absolute; left: -9999px;

  margin: 0 0 0 650px; padding: 3px 3px 3px 3px; 

  border-style:none; border-color:none; border-width:0px;}

.dropt3:hover span {margin: 0 0 0 650px;

    border:5px solid #57951e;

    background-color:#fff; color:#000;  0 0 no-repeat;

    padding: 18px 16px 23px 15px;

    text-align: center;

 z-index:6;}

.dropt3:hover span:after{ /*the span will display just on :hover state*/

    content:'';

    position:absolute;

    top:-11px;

    width:10px;

    height:10px;

    border-bottom:5px solid #57951e;

    border-right:5px solid #57951e;

    background:#fff;  0 0 no-repeat;

    left:50%;

    margin-left:-5px;

    -moz-transform:rotate(135deg);

    -webkit-transform:rotate(135deg);

    transform:rotate(235deg);

    z-index:6;

  }

The first thing I had to do when creating these pop ups on hover was hide the text underline that occurs on the words that need to be defined because that was not needed. Next you need to define where the box appears as this is a page with three columns and you want the boxes to appear in the right area. Then you define what the box looks like and how big its going to be. Then you define what the text will look like and where it goes in the box Then you add some extra little stylings for the little arrow on the box.