JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<input type="text" value="[email protected]"
		name="email" id="email">

CSS

.popover-danger {
	background-color: #d9534f;
	border-color: #d43f3a;
	color: white;
}

.popover-danger.right .arrow:after {
	border-right-color: #d9534f;
}

#email {
    height: 50px;
    width: 300px;
}

JavaScript

$(document).ready(function() {
	$('#email').focus(function() {
		$(this).popover();
		var popover = $(this).data('bs.popover');
		
		$(this).keyup(function() {
			var value = $(this).val();
			if(value.length === 0)
			{
				popover.options.content = 'Type in your email.';
				$(this).popover('show');
				$(this).next('.popover').addClass('popover-danger');
			}
		});
	});
});