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