Tooltip

by tickietick

HTML

<div class="panel">
  <label>Enter: </label>
  <div class="amount">
    <input id="amount_input" type="text" class="tooltip" placeholder="$$$" onfocus="hideTip()">
    <span id="tooltiptext" class="tooltiptext">Please enter a number</span>
  </div>

  <input type="button" value="Check" onclick="validateTip()">
</div>

CSS

div.panel {
  font-family: Arial;
  margin-top: 10px;
  margin-left: 10px;
}

.amount {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Tooltip text position */
  position: absolute;
  top: 150%;
  left: 0%;
}

.amount .tooltiptext::after {
  content: "";
  position: absolute;
  border-style: solid;
  top: -55%;
  left: 25%;
  margin-left: -5px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

JavaScript

function validateTip() {
  var val = document.getElementById("amount_input").value;
  if (!/^[0-9]*$/.test(val)) {
    document.getElementById("tooltiptext").style.visibility = "visible";
  }
  else {
  	document.getElementById("amount_input").value = "I ate " + new Number(val) + " moneys!"
  }
}

function hideTip() {
  document.getElementById("tooltiptext").style.visibility = "hidden";
}