How To Put Bootstrap Tooltip On Textbox If Validation Fails For That Textbox?

I want to Perform Validation on textbox if there is no value(empty). I want to display Tooltip on textbox if validation fails. This is my textbox: read up how the validation can be put together because there are various methods; this Tooltip example is taken from here

$("#valForm").validate({

  showErrors: function(errorMap, errorList) {

    // Clean up any tooltips for valid elements
    $.each(this.validElements(), function(index, element) {
      var $element = $(element);

      $element.data("title", "") // Clear the title - there is no error associated anymore
        .removeClass("error")
        .tooltip("destroy");
    });

    // Create new tooltips for invalid elements
    $.each(errorList, function(index, error) {
      var $element = $(error.element);

      $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
        .data("title", error.message)
        .addClass("error")
        .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
    });
  },

  submitHandler: function(form) {
    alert("This is a valid form!");
  }
});

$('#reset').click(function() {
  var validator = $("#valForm").validate();
  validator.resetForm();
});

body {
  background: rgba(255, 255, 255, 0.45);
}
.wrapper {
  padding-top: 75px;
}
#valForminput {
  width: 100%;
  height: 50px;
  padding: 5px20px;
  margin-bottom: 10px;
  font-size: 16px;
}
#valForm select {
  width: 100%;
  padding: 5px20px;
  margin-bottom: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 50px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
form#valForm {
  padding: 10px;
}
#valForm.error {
  border: 3px solid #b94a48!important;
  background-color: #fee!important;
}
#valFormlabel {
  display: block;
  margin-bottom: 10px;
  color: #1c1c1c;
}
#valForm.form-group {
  display: inline-block;
}
#valForm.btn-primary {
  width: 100%;
  height: 50px;
  border-radius: 0px;
  font-weight: 400;
  font-size: 25px;
  background: #70CCF4;
  border-color: #fff;
  margin-bottom: 15px;
}
#valForm.btn-clear {
  width: 100%;
  height: 50px;
  border-radius: 0px;
  font-weight: 400;
  font-size: 25px;
  background: #C91B08;
  border-color: #fff;
  color: #fff;
  margin-bottom: 15px;
}
#valForm.tooltip > .tooltip-inner {
  background-color: #f00;
}
#valForm.tooltip > .tooltip-arrow {
  border-top-color: #f00;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"  /><divclass="wrapper"><divclass="container"><formid="valForm"name="valForm"><divclass="row"><divclass="col-md-6"><inputdata-msg-date="A NAME is Required."data-msg-required="The NAME field is required."data-rule-text="true"data-rule-required="true"id="textField"name="textField"type="text"value="" /><labelfor="textField">A NAME is required.</label></div><divclass="col-md-6"><inputdata-msg-email="A Valid EMAIL is Required."data-msg-minlength="."data-msg-required="A Valid EMAIL is Required.."data-rule-email="true"data-rule-minlength="5"data-rule-required="true"id="emailField"name="emailField"type="text"value="" /><labelfor="emailField">A Valid EMail is Required.</label></div></div><divclass="row"><divclass="col-md-6"><inputdata-msg-number="A NUMBER from 1-20 is Required."data-msg-range="A NUMBER from 1-20 is Required."data-rule-number="true"data-rule-range="[1,20]"id="numberField"name="numberField"type="text"value="0" /><labelfor="numberField">A Number between 1 and 20 is Required.</label></div><divclass="col-md-6"><selectdata-msg-required="One SELECTION is Required."data-rule-required="true"id="selectFIELD"name="selectFIELD"><optionvalue="">Select Something</option><optionvalue="Yes">Option 1</option><optionvalue="No">Option 2</option><optionvalue="Maybe">Option 3</option></select><labelfor="selectFIELD">One Option is Required.</label></div></div><divclass="row"><divclass="col-md-6"><buttontype="submit"class="btn btn-primary">Validate</button></div><divclass="col-md-6"><inputclass="btn btn-clear"type="reset"id="reset"onClick="CommentForm.reset();"value="Clear Form"readonly></div></div></form></div></div>

Solution 2:

at first you should include the Bootstrap Tooltip plugin to call the tooltip().

there is a direct plugin available for bootstrap,try with this Bootstrap Validation Tooltip.