Description

NVal-Tippy is a wrapper for NVal and Tippy.js plugins that allows you to display validation errors in tooltips.

Installation

NPM

npm install nval-tippy

CDN

<script src="https://unpkg.com/[email protected]/dist/browser/nval.min.js"></script>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script src="https://unpkg.com/[email protected]/dist/browser/nval-tippy.min.js"></script>

Usage

Declare

NPM version

Import:

import { NValTippy } from "nval-tippy";

Then:

// Pass the form element as an argument.
var validator = new NValTippy(document.getElementById("myForm"));

CDN version

// Pass the form element as an argument.
var validator = new NValTippy.NValTippy(document.getElementById("myForm"));

Run

validator.isValid(); // Returns boolean.

Configuration

Validation

NValTippy object extends NVal. To configure validation use the official documentation for it.

Tooltips

Tooltip options are available by the public property tippyOptions. To configure tooltips use the official documentation for Tippy.js.