Validation tooltip / popup - How does it work? Are there any config options? Screenshots included

[I-keep-trying]

Sorry if this seems vague, but I'm not sure how to describe what I'm seeing in a way that makes sense and differentiates the "popup" or "tooltip" errors from the simple rendered text errors that appear below or beside the field being validated.

Here is the ordinary validation error that I see, which is fine, but this is an example of what I'm not referring to:

Here are two examples of the popup/tooltip validation errors, and I CANNOT figure out where they come from, how to configure them, for example, if I would like an additional one to require at least one dot after the '@' in an email:

However, the output of console.log(errors) is literally NOTHING at all. Also, nothing happens when I submit input bluebill1049@example (no tld). I could use the regular inline text error message for the tld error, but I like the way the popup errors look, plus I want all the error messages to look consistent if at all possible.

Thank you in advance, and thank you for making this amazing package.

Here's my code in case it might help:

import React from 'react'
import { useForm } from 'react-hook-form'

export default function DemoForm() {
  const { register, handleSubmit, errors } = useForm()
  const onSubmit = (data) => {
    alert(JSON.stringify(data))
  }
  console.log('DemoForm errors', errors)

  const intialValues = {
    firstName: 'billss',
    lastName: 'luoss',
    email: '[email protected]',
    age: 33,
  }
  console.log('errors', errors)
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            defaultValue={intialValues.firstName}
            name="firstName"
            placeholder="bill"
            ref={register({
              validate: (value) => value !== 'bill',
            })}
          />
        </div>
        {errors.firstName && <p>Your name is not bill</p>}

        <div>
          <label htmlFor="lastName">Last Name</label>
          <input
            defaultValue={intialValues.lastName}
            name="lastName"
            placeholder="luo"
            ref={register({
              validate: (value) => value.length > 3,
            })}
          />
        </div>
        {errors.lastName && <p>Your last name is less than 3 characters</p>}

        <div>
          <label htmlFor="email">Email</label>
          <input
            defaultValue={intialValues.email}
            name="email"
            placeholder="[email protected]"
            type="email"
            ref={register({
              required: true,
              pattern: /^\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b$/i,
            })}
          />
        </div>
        <div>
          <label htmlFor="age">Age</label>
          <input
            defaultValue={intialValues.age}
            name="age"
            placeholder="0"
            type="text"
            ref={register({
              validate: {
                positiveNumber: (value) => parseFloat(value) > 0,
                lessThanHundred: (value) => parseFloat(value) < 200,
              },
            })}
          />
        </div>
        {errors.age && errors.age.type === 'positiveNumber' && (
          <p>Your age is invalid</p>
        )}
        {errors.age && errors.age.type === 'lessThanHundred' && (
          <p>Your age should be greater than 200</p>
        )}

        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

[bluebill1049]

can you share this in a codesandbox? that tooltip r build in validation from the browser.

[I-keep-trying]

Sure, here you go.

[I-keep-trying]

So, you're saying that my browser is doing this, not react-hook-form? I've never seen this before! And I'm pretty sure this is not the first form I've ever done. I'm going to check out other browsers to see what happens.

[bluebill1049]

Those pop up tooltip is from broswer, however i can't reproduce in your CSB.

[I-keep-trying]

OK, well that does help. Thank you for your help, at least now I know what it's ::not:: 😊

[roomman]

A bit late to this party but for anyone else who bumps into this, adding noValidate to <form> disabled HTML5 form validation and blocks the tooltips.

<form
  action="#"
  method="POST"
  onSubmit={handleSubmit(onSubmit)}
  noValidate // disable browser validation so we don't get tooltips
>
...
</form>