JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<input class="ui-widget ui-widget-content ui-corner-all" id="age" placeholder="Your Age" title="Must be 18"/>

CSS

body {
    font-size: 0.8em;
}

input {
    padding: 1px;
}

JavaScript

var oldContent,
    error = "You're too young";

function updateTooltipClass( e ) {
    
    var $this = $( e.target ),
        val = $this.val(),
        content = $this.tooltip( "option", "content" );
    
    if ( content !== error ) {
        oldContent = content;    
    }
    if ( $.isNumeric( val ) && val < 18 ) {
        $this.tooltip( "option", "content", error );
    } else {
        $this.tooltip( "option", "content", oldContent );
    }
    
}

$( "#age" ).tooltip({tooltipClass:"ui-state-error"}).on({
    keyup: updateTooltipContent,
    tooltipopen: updateTooltipContent
});