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/@form-validation/umd/styles/index.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/@form-validation/umd/bundle/popular.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

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

Option	Type	Description
`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	Plugin
Bootstrap 3 framework	Bootstrap3 plugin
Bootstrap 4 framework	Bootstrap plugin
Bulma framework	Bulma plugin
Foundation framework	Foundation plugin
Materialize framework	Materialize plugin
Milligram framework	Milligram plugin
mini.css framework	Mini plugin
MUI framework	Mui plugin
Pure library	Pure plugin
Semantic UI framework	Semantic plugin
Shoelace library	Shoelace plugin
Spectre framework	Spectre plugin
Tachyons library	Tachyons plugin
turretcss framework	Turret plugin
UIkit framework	Uikit 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'
            }),
        },
    }
);

Using the npm packages

If you are using a bundler such as Webpack, Rollup, Parcel or Vite, etc., to bundle your application, then it's recommended to use the FormValidation NPM packages.

Install the packages:

$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-tooltip

Import and use the Tooltip plugin:

import { formValidation } from '@form-validation/bundle/popular';
import { Tooltip } from '@form-validation/plugin-tooltip';

formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            tooltip: new Tooltip({
                ...
            }),
            ...
        },
    }
);

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

v2.4.0

The plugin can be enabled or disabled using the enablePlugin and disablePlugin methods

v2.0.0

Add the npm package

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

Tachyons plugin Transformer plugin