0
I have two inputs with setCustomValidity.
In the first input the setCustomValidity tooltip appears correctly aligned to the left, as in the image below:
But in the other input it appears aligned to the middle, and the result I expected was to be aligned to the left as in the first input, as in the image below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<form>
<label>Code:</label>
<input type="text" maxlength="3" required oninvalid="this.setCustomValidity(); "/>
<label>Description:</label>
<input type="text" maxlength="3" required oninvalid="this.setCustomValidity();" style="width: 500px;"/>
<button type="submit">Submit</button>
</form>
</body>
</html>
Does anyone know how to align the setCustomValidity tooltip on the left?
Notice that it actually seems to be aligned to the center of the input! You can make an easy test by placing inputs of various sizes that you will notice better this. Also this tooltype "style" can vary from browser to browser, being different in Chrome, Firefox, Edge etc. Ideally you create your own tooltype
– hugocsl
@hugocsl Valeu! Really every browser has its implementation standard, and so far I have not seen how to move the property directly, nor the css, to adjust the positions.
– DevRyu
If you can customize it will be with classes -Webkit- or -Moz- vc you will have to see what are the attributes of the user-agent for each vendor-prefix... so I gave the idea that you do not use the default model and leave to create your own model. Bootstrap for example has a standard model, precisely to avoid relying on the user’s browser and always show the same tooltype independent of the https://getbootstrap.com/docs/4.1/components/tooltips/
– hugocsl
@hugocsl Really, the best is to create your own model, because the cost of time gets MUCH lower, thank you!
– DevRyu