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:




    


    
...
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(), ... }, } ); });

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

Option Type Description
placement String

Indicate 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
trigger String

Indicate 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:

Framework Using with plugin
Bootstrap 3 framework Bootstrap 3
Bootstrap 4 framework Bootstrap
Bulma framework Bulma
Foundation framework Foundation
Materialize framework Materialize
Milligram framework Milligram
mini.css framework Mini
MUI framework Mui
Pure library Pure
Semantic UI framework Semantic
Shoelace library Shoelace
Spectre framework Spectre
Tachyons library Tachyons
turretcss framework Turret
UIkit framework Uikit

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.