Tooltip plugin

Show error message in a tooltip


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:

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.


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:

If you don't want the plugin supporting given CSS framework above to show the error message, you can set defaultMessageContainer: false as following:

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.


  • v1.0.0: First release