CSS - tooltip only with css and html doesn't work

Problem

I am trying to do simple tooltip only with css3 and html, but the transition doesn't work. What am I doing wrong?

HTML

<p>
    This has tooltip
</p>
<div class="tooltip">Tooltip content</div>

CSS

p {
    width: 200px;
    background-color: aqua;
    padding: 10px;
    margin-top: 50px;
}

div.tooltip {
    position: absolute;
    width: auto;
    padding: 10px;
    background-color: rgba(0,0,0, 0.5);
    top: 0px;
    display: none;
    opacity: 0.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

p:hover + div.tooltip {
    display: block;
    opacity: 1.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

http://jsfiddle.net/MCDg4/

Problem courtesy of: Krab

Solution

Update / Alternate solution

For a modern browser CSS3 solution you could use pseudo elements..

<span data-tooltip="I am the tooltip">This has a tooltip</span>

and

[data-tooltip]{
    position:relative;
}
[data-tooltip]:before{
    content:attr(data-tooltip);
    position:absolute;
    bottom:110%;
    padding:10px;
    background:#666;
    opacity:0;
    color:white;
    font-size:smaller;
    -webkit-transition:opacity 1s ease;
    -o-transition:opacity 1s ease;
    transition:opacity 1s ease;
    pointer-events:none;
}
[data-tooltip]:hover:before{
    opacity:1;
}

Demo at http://jsfiddle.net/BJ2tr/

(this could be done without pseudo-elements by nesting the tooltip inside the elements that it refers to, and adjusting the css accordingly)


Unfortunately when you change display from none to something else, you cannot have transitions.

Instead of display:none you could just offset it outside of the window (with top:-9999px) and bring it to position when showing it.

div.tooltip {
    position: absolute;
    width: auto;
    padding: 10px;
    background-color: rgba(0,0,0, 0.5);
    top: -999px; /*CHANGED THIS AND REMOVED display:none*/
    display: none;
    opacity: 0.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

p:hover + div.tooltip {
    opacity: 1.0;
    top: 0px; /*ADDED THIS AND REMOVED display:block*/
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

This will, however, not fade out (only in) since it moves it away on mouseout (so it actually does fade but you do not see it because it is outside the viewport)..

Solution courtesy of: Gaby aka G. Petrioli

Discussion

Explanation

You put transition only on opacity, while when changing to display:block; it is shown as a block with opacity:1; by default.

Solution

(JSFiddle)

Delete the display:none; and display:block on your tooltip element.

Discussion courtesy of: Jeff Noel

This recipe can be found in it's original form on Stack Over Flow.