error message tooltip not visible

Question

I want to get error message using tooltip, I display:none in span with an id of demo to hide tooltip. Then get the id using getElementById javascript for username with an id of userverify to get if input is empty and then if value is empty then display block and innerhtml the id of demo

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>

Answer 1

First

y = document.getElementById("demo").styleDisplay = "block";

is not correct...try style.display

Second your tooltip has visibility:hidden and opacity:0 too....so you will need to change these values also with display.

Stack Snippet

function validateForm() {
  var x = document.getElementById("userverify").value;
  var y = document.getElementById("demo");
  //console.log(x);
  if (x == "" || x == null) {
    y.style.display = "block";
    y.style.visibility = "visible";
    y.style.opacity = "1";
    y.innerHTML = "Empty Username";

  }
}

.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="button" name="submit" value="Submit">

</form>