popup on hover

HTML

<div id="button" class="popupHoverElement">
     <h3>hover</h3>

    <div id="two" class="popupBox">Hovered content and a long one too<br /> works with line breaks too</div>
</div>

CSS

#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
}
.popupBox {
    visibility:hidden;
    opacity:0;
    -webkit-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -moz-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -o-transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    transition:visibility 0s linear 0.3s, opacity 0.3s linear;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition:all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay:1s;
    transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
    visibility:visible;
    opacity:1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}