JSFiddle - React, Tailwind, and code Playground

by Liad Idan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container text-center mt-5">
  <div class="row justify-content-center mb-3">
    <div class="col-md-6">
      <form>
        <div class="form-group">
          <label for="formGroupExampleInput">First Name</label>
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="First Name">
        </div>
        <div class="form-group">
          <label for="formGroupExampleInput2">Last Name</label>
          <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Last Name">
        </div>
        <input type="submit" id="submit" class="btn btn-sm btn-primary" value="Submit">
      </form>
    </div>
    <div id="more-content"></div>
  </div>
  <button id="add" class="btn btn-primary">Add Content</button>
  <button id="remove" class="btn btn-danger">Remove</button>
  <p class='small mt-2'>
    *Submit the form with empty field(s) to show the tooltips.
  </p>
</div>

CSS

.form-group {
  position: relative;
}

JavaScript

$('#submit').on('click', function(e) {
	var inputs = $('input[type="text"]');
	e.preventDefault();
  
  inputs.each(function() {
  	var input = $(this);
    var hasTooltip = input.attr('aria-describedby') ? true : false;
    
  	if (input.val() === '') {
      if (!hasTooltip) {
        input.tooltip({
        	container: input.parent(),
          title: 'required field',
          trigger: 'manual'
        }).tooltip('show');
      }
      else {
      	input.tooltip('show');
      }
    }
    else {
      if (hasTooltip) {
        input.tooltip('dispose');
        input.attr('aria-describedby', '');
      }
    }
  });
});

var moreContentDiv = $('#more-content');

// Add content
$('#add').on('click', function() {
	if (moreContentDiv.html() === '') {
  	moreContentDiv.addClass('col-md-6');
    moreContentDiv.html('<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>');
  }
});

// Remove content
$('#remove').on('click', function() {
	if (moreContentDiv.html() !== '') {
  	moreContentDiv.removeClass('col-md-6');
    moreContentDiv.html('');
  }
});