CSS transition opacity and visibility

HTML

<div class="widget"><button class="btn">Hover me</button></div>
<span class="tooltip">“Lorem ipsum” generator</span>

<p><a href="http://www.lipsum.com/">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Quisque fermentum sapien id tincidunt dapibus. Fusce eget mi vitae urna porttitor adipiscing. Vestibulum ac mi neque. Nam convallis arcu eu suscipit euismod. Proin dolor purus, viverra eget interdum sodales, condimentum ut ligula. Cras pretium porttitor vestibulum. Nam fermentum lobortis sapien, a pretium nulla adipiscing vitae.</p>

CSS

.widget {
    display: inline-block;
}

.tooltip {
    display: block;
    position: absolute;
    background: #333;
    color: white;
    padding: 20px;
}

.tooltip {
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    -moz-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    -o-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
    transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
}

.widget:hover+.tooltip {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}