JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<form>
    <input type='text' />
    <input type='text' />
    
</form>

JavaScript

$('document').ready(function(){
    $('input').blur(function(){
        if($(this).val()==''){
            //variable required for using from within setTimout
            var $this = $(this);
            
            $this.popover({
                html: true,
                title: "Required Field",
                content:'Please fill this field!',
                placement: 'top',
                trigger: 'manual'
            })
            .focus(function(){
                $(this).popover('destroy');
            })
            
            //show the popover
            $this.popover('show');
            
            //destroy popover after 2 seconds
            setTimeout(function () {
                $this.popover('destroy');
            }, 2000);
        }
    });
    
    
});