JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<form>
    <input type="text"></input>
    <input type="text"></input>
    <div>
    <input type="submit"></input>
</form>

JavaScript

(function() {
    $.widget('ui.error', $.ui.tooltip, {
        _create: function() {
            this.options.items = this.element;
            this.options.content = 'Error';
            this._super();
            this.open();
        },
        
        open: function() {
            this._super();
            this._off(this.element, 'mouseleave focusin focusout');
        }
    });
})();

$(function() {
    $('form').on({
        submit: function(e) {
            e.preventDefault();
            $('input[type="text"]').error();  
        }
    });
    $('input[type="text"]').on('focusin', function(e) {
        
        $(this).error('destroy');
    });
})