JSFiddle - React, Tailwind, and code Playground

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;}