How can I make this kind of error message? I am building a login validation form.

How can I make this kind of error message? I am building a login validation form.

In addition:
You can use customValidity api to create custom messages and will use the default tooltip provided by the browser.
DOCS: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
Check bellow a simple example:
https://jsbin.com/popazajawu/2/edit?html,js,console,output
JS:
var inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('invalid', function(e) { e.target.setCustomValidity("[CUSTOM MESSAGE] This field cannot be left blank") }) input.addEventListener('input', function(e) { e.target.setCustomValidity(""); }) })