Tooltip plugin

Show error message in a tooltip

Usage

You have to use this plugin with Icon plugin which displays different icons depending on the field validity. The error message then will be shown inside a tooltip when you click or hover on the icon.
The following piece of code is the starting point to use the Tooltip plugin:
<html>
<head>
<link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css" />
</head>
<body>
<form id="demoForm" method="POST">...</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
// You have to register the Tooltip plugin before Icon plugin
tooltip: new FormValidation.plugins.Tooltip({
placement: ...,
trigger: ...,
}),
icon: new FormValidation.plugins.Icon(),
...
},
}
);
});
</script>
</body>
</html>
The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Options

OptionTypeDescription
placementStringIndicate where the tooltip will be displayed over the icon
Can be one of the following values
  • top (the default value)
  • top-left
  • top-right
  • bottom
  • bottom-left
  • bottom-right
  • left
  • right
OptionTypeDescription
triggerStringIndicate when the tooltip will be displayed
Can be one of the following values:
  • click (the default value): Clicking on the icon will show up the tooltip.
  • hover: Hovering the mouse over the icon will show up the tooltip.
Same as the Icon plugin, the Tooltip plugin only supports the form made in the following CSS frameworks:
FrameworkPlugin
Bootstrap 3 frameworkBootstrap3 plugin
Bootstrap 4 frameworkBootstrap plugin
Bulma frameworkBulma plugin
Foundation frameworkFoundation plugin
Materialize frameworkMaterialize plugin
Milligram frameworkMilligram plugin
mini.css frameworkMini plugin
MUI frameworkMui plugin
Pure libraryPure plugin
Semantic UI frameworkSemantic plugin
Shoelace libraryShoelace plugin
Spectre frameworkSpectre plugin
Tachyons libraryTachyons plugin
turretcss frameworkTurret plugin
UIkit frameworkUikit plugin
If you don't want the plugin supporting given CSS framework above to show the error message, you can set defaultMessageContainer: false as following:
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
bootstrap: new FormValidation.plugins.Bootstrap({
// Do not show the error message in default area
defaultMessageContainer: false,
}),
// Again, remember to register the Tooltip plugin before Icon plugin
tooltip: new FormValidation.plugins.Tooltip(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
},
}
);

Basic example

In the following form, try to press the Add product button, and then click on the any icon that is attached to any invalid field.
Tooltip plugin

Changelog

v1.8.0
  • The Tooltip plugin doesn't display the error message at proper position if it is long enough
  • The tooltip blocks user from entering the field
v1.6.0
  • Fixed an issue that causes the tooltip position isn't calculated correcly
v1.0.0
  • First release