Download
Github project
References
Bootstrap Tooltip jQuery Validation

jQuery-Validation-Bootstrap-tooltip demo

Below are a few examples of how jQuery-Validation-Bootstrap-tooltip can utilize tooltips to display validation error labels with blatant abuse of default Twitter Bootstrap styles. The accompanying tag code is the same as input sans the placeholder attribute.

Note The HTML5 required attribute will invoke the broswer's default error indicator (typically a red border around the input). Using the required class will not.

Examples using data attributes
Example 1: Required input with default options.
<input type="text" name="example1" required>
Example 2: Change tooltop placement with an attribute
<input type="number" data-placement="bottom" name="example2" required name="example2">
Example 3: After failing validation, bind an additional tooltip trigger to the focus event
<input type="text" class="required email" data-trigger="focus" name="example3"">
Examples using JavaScript
  • $("#theform").validate({
    • rules: {
      • example4: {email:true, required: true},
      • example5: {required: true}
    • },
    • messages: {
      • example5: "Just check the box<h5 class='text-danger'>You aren't going to read the EULA</h5>"
    • },
    • tooltip_options: {
      • example4: {trigger:'focus'},
      • example5: {placement:'right',html:true}
    • },
  • });
Example 4: Same as Example 3 but using validate() instead
<input type="text" name="example4">
Example 5: Checkbox
<input type="checkbox" name="example5">