In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of userverify to check if it is empty or not. If the value is empty, I set the display property to block and change the innerHTML of the demo element.
function validateForm() {
var x = document.getElementById("userverify").value;
var y;
if (x == "" || x == null) {
y = document.getElementById("demo").styleDisplay = "block";
document.getElementById("demo").innerHTML = y + "<h1>Empty Username</h1>";
}
}.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}<form action="" method="" name="">
<br>
<br>
<br>
<label>Username</label>
<div class="tooltip">
<input id="userverify" class="" type="text" name="username">
<span class="tooltiptext" id="demo" style="display:none">Tooltip text</span>
</div>
<input onclick="validateForm()" type="submit" name="submit" value="Submit">
</form>