Using tooltip to show message
← Examples
FormValidation allows to use tooltip to show message via the err.container option.
It uses the built-in tooltip component provided by frameworks:
| Framework | | |
|---|---|---|
| Bootstrap | Bootstrap's tooltip | Bootstrap's popover |
| Foundation | Foundation's tooltip | |
| Semantic | Semantic's popup | |
| UIKit | UIKit's tooltip | |
Since the Pure framework doesn't have tooltip and popover components, it's not possible to place message inside tooltip when using Pure.
Due to the limitation of tooltip height element, it shows only one message even in the case the field doesn't pass multiple validators at the same time
<form id="registrationForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date of birth</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
err: {
// You can set it to popover
// The message then will be shown in Bootstrap popover
container: 'tooltip'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" class="fv-form-horizontal">
<div class="row">
<div class="small-3 columns">
<label class="right inline">Full name</label>
</div>
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
<div class="small-6 columns">
<input type="text" name="lastName" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Username</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="username" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="password" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right">Gender</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="radio" name="gender" value="male" /><label>Male</label>
<input type="radio" name="gender" value="female" /><label>Female</label>
<input type="radio" name="gender" value="other" /><label>Other</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Date of birth</label>
</div>
<div class="small-4 small-pull-5 columns">
<input type="text" name="birthday" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button small" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
err: {
container: 'tooltip'
},
fields: {
firstName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm">
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Full name</label>
</div>
<div class="small-9 columns">
<div class="row">
<div class="small-6 columns">
<input type="text" name="firstName" placeholder="First name" />
</div>
<div class="small-6 columns">
<input type="text" name="lastName" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Username</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="username" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Password</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="password" name="password" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right">Gender</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="radio" name="gender" value="male" /><label>Male</label>
<input type="radio" name="gender" value="female" /><label>Female</label>
<input type="radio" name="gender" value="other" /><label>Other</label>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Date of birth</label>
</div>
<div class="small-4 small-pull-5 columns">
<input type="text" name="birthday" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
err: {
container: 'tooltip'
},
fields: {
firstName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.small-6',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" class="ui grid form fv-form-horizontal">
<div class="row field">
<label class="four wide column">Full name</label>
<div class="six wide column">
<div class="ui input icon">
<input name="firstName" type="text" placeholder="First name" />
</div>
</div>
<div class="six wide column">
<div class="ui input icon">
<input name="lastName" type="text" placeholder="Last name" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Username</label>
<div class="eight wide column">
<div class="ui input icon">
<input name="username" type="text" placeholder="Username" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Email address</label>
<div class="eight wide column">
<div class="ui input icon">
<input name="email" type="text" placeholder="Email address" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Password</label>
<div class="eight wide column">
<div class="ui input icon">
<input name="password" type="password" placeholder="Password" />
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Gender</label>
<div class="eight wide column">
<div class="ui input icon">
<div class="ui radio checkbox">
<input name="gender" type="radio" value="male" /> <label>Male</label>
</div>
<div class="ui radio checkbox">
<input name="gender" type="radio" value="female" /> <label>Female</label>
</div>
<div class="ui radio checkbox">
<input name="gender" type="radio" value="other" /> <label>Other</label>
</div>
</div>
</div>
</div>
<div class="row field">
<label class="four wide column">Date of birth</label>
<div class="four wide column">
<div class="ui input icon">
<input type="text" name="birthday" placeholder="YYYY/MM/DD" />
</div>
</div>
</div>
<div class="row">
<label class="four wide column"></label>
<div class="eight wide column">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="ui primary button">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
err: {
container: 'tooltip'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script><form id="registrationForm" class="uk-form uk-form-horizontal">
<div class="uk-form-row">
<label class="uk-form-label">Full name</label>
<div class="uk-form-controls">
<div class="uk-grid">
<div class="uk-width-1-2">
<input class="uk-width-1-1" name="firstName" type="text" placeholder="First name" />
</div>
<div class="uk-width-1-2">
<input class="uk-width-1-1" name="lastName" type="text" placeholder="Last name" />
</div>
</div>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Username</label>
<div class="uk-form-controls">
<input name="username" type="text" placeholder="Username" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Email address</label>
<div class="uk-form-controls">
<input name="email" type="text" placeholder="Email address" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Password</label>
<div class="uk-form-controls">
<input name="password" type="password" placeholder="Password" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Gender</label>
<div class="uk-form-controls">
<label><input name="gender" type="radio" value="male" /> Male</label> <br/>
<label><input name="gender" type="radio" value="female" /> Female</label> <br/>
<label><input name="gender" type="radio" value="other" /> Other</label>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Date of birth</label>
<div class="uk-form-controls">
<input type="text" name="birthday" placeholder="YYYY/MM/DD" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<button type="submit" class="uk-button uk-button-primary">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm').formValidation({
framework: 'uikit',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
err: {
container: 'tooltip'
},
fields: {
firstName: {
row: '.uk-width-1-2',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.uk-width-1-2',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script>It's also possible to mix showing message in tooltip and usual area by setting err option to particular field:
<form id="messageForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Message</label>
<div class="col-xs-9">
<textarea class="form-control" name="message" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#messageForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
message: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
min: 20,
max: 500,
message: 'The message must be more than 20 and less than 500 characters long'
}
}
},
email: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
}
}
});
});
</script><form id="messageForm" class="fv-form-horizontal">
<div class="row">
<div class="small-3 columns">
<label class="right inline">Message</label>
</div>
<div class="small-9 columns">
<textarea name="message" rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="right inline">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button small">Send</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#messageForm').formValidation({
framework: 'foundation5',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
message: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
min: 20,
max: 500,
message: 'The message must be more than 20 and less than 500 characters long'
}
}
},
email: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
}
}
});
});
</script><form id="messageForm">
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Message</label>
</div>
<div class="small-9 columns">
<textarea name="message" rows="5"></textarea>
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label class="text-right middle">Email address</label>
</div>
<div class="small-6 small-pull-3 columns">
<input type="text" name="email" />
</div>
</div>
<div class="row">
<div class="small-9 small-push-3 columns">
<button type="submit" class="button">Send</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#messageForm').formValidation({
framework: 'foundation',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
message: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
min: 20,
max: 500,
message: 'The message must be more than 20 and less than 500 characters long'
}
}
},
email: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
}
}
});
});
</script><div class="ui grid">
<div class="twelve wide column centered">
<form id="messageForm" class="ui form">
<div class="field">
<label>Message</label>
<div class="ui input icon">
<textarea name="message" rows="5"></textarea>
</div>
</div>
<div class="field">
<label>Email address</label>
<div class="ui input icon">
<input type="text" name="email" />
</div>
</div>
<button type="submit" class="ui primary button">Send</button>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('#messageForm').formValidation({
framework: 'semantic',
icon: {
valid: 'checkmark icon',
invalid: 'remove icon',
validating: 'refresh icon'
},
fields: {
message: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
min: 20,
max: 500,
message: 'The message must be more than 20 and less than 500 characters long'
}
}
},
email: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
}
}
});
});
</script><form id="messageForm" class="uk-form uk-form-horizontal">
<div class="uk-form-row">
<label class="uk-form-label">Message</label>
<div class="uk-form-controls">
<textarea name="message" rows="5" class="uk-width-1-1"></textarea>
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">Email address</label>
<div class="uk-form-controls">
<input name="email" type="text" class="uk-form-width-medium" />
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label"></label>
<div class="uk-form-controls">
<button type="submit" class="uk-button uk-button-primary">Send</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#messageForm').formValidation({
framework: 'uikit',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
message: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
min: 20,
max: 500,
message: 'The message must be more than 20 and less than 500 characters long'
}
}
},
email: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
}
}
});
});
</script>Related examples
The following example show how to use custom tooltip library: