After filling out the form and clicking on “submit”, the first field with an error has the tooltip “Value not filled in!”.
It automatically disappears after the focus is changed or the page scrolls somewhere and does not appear again, except if you press “submit” again.
I would like to know if there are any ways to keep this tooltip from doing anything except when the user finally fixes the value in the field, for example, starts typing something into it.
So far the only thing I’ve found is controlling the text of the tooltip in the “oninvalid” event :
<form action="" method="get">
<input type="text" name="name" required oninvalid="this.setCustomValidity('Wow!')" />
<input type="submit" value="Submit!" />
</form>
I can also apply the same method of changing text on the “oninput” event. The text won’t disappear while the user is typing something, but that’s not what I’d like…..
And the main question is how to keep the tooltip, once it appears, does not disappear until you start typing text into it.