Hover div, fade-in text.

by Ken Watanabe

HTML

<div class="form-item message-error" data-tooltip="Bad value">
    <div class="description">Some text</div>
    <input type="text" class="form-text" maxlength="128" size="7">
</div>

CSS

@-webkit-keyframes showTooltip {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes showTooltip {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes showTooltip {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.form-item {
    position: relative;
}
.message-error:after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0;
    left: 10%;
    display: none;
    padding: 1em 2em;
    color: white;
}
.message-error:hover:after {
    display: block;
    -webkit-animation: showTooltip 0.35s ease-in-out;
    -moz-animation: showTooltip 0.35s ease-in-out;
    animation: showTooltip 0.35s ease-in-out;
}
.message-error:after {
    background-color: red;
}