CSS Suggestion Box for Inputs

Make a suggestion box appear once an input gets focus using CSS.

HTML

<p>Click in the input field to make the tip appear. Click out of the input to make the tip go away.</p>

<label id="phoneLabel">
    Phone Number: <input id="phone" type="text" />
    <span>Please use this format:<br />(123) 456-7890</span>
</label>

<p>This uses the method explained in other of my fiddles, using the label of the input as a container. The span is hidden and a CSS3 transition is triggered once the input has focus.</p>

<p>Notice that I hide the span by positioning it way to the left as opposed to using display: none. This is done so that the transition will work. Apparently changing the display property in any way tends to break the transition. If you don't want to use a transition then changing the display from none to block will work as well.</p>

<p>You wouldn't necessarily need the label element to do this as using a div would work as well, I just like wrapping my inputs in labels to get their benefits.</p>

CSS

p {
    margin: 10px;
}

#phoneLabel {
    border: 1px solid black;
    display: block;
    margin: 20px auto;
    padding: 10px;
    position: relative;
    width: 400px;
}
#phone {
    padding: 4px;
    width: 200px;
}
#phone + span {
    background-color: white;
    border: 3px solid green;
    display: block;
    left: -9999px;
    opacity: 0;
    padding: 7px 0px;
    position: absolute;
    text-align: center;
    top: 40px;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    width: 200px;
}
#phone:focus + span {
    left: 140px;
    opacity: 1;
}