JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="inp" data-tooltip="some tooltip" />
<input type="text" id="inp" data-tooltip="some tooltip" />
CSS
.tooltip{
position:absolute;
display:block;
padding:10px;
border:1px solid #333;
}
JavaScript
var tt;
inp.onchange = function(){
if(this.value.length < 5){
if(!tt){
tt = createTooltip(this);
document.body.appendChild(tt);
}
}
else{
if(tt)
tt.parentNode.removeChild(tt);
}
}
function createTooltip(element){
var tooltip = document.createElement("span");
var rect = element.getBoundingClientRect();
tooltip.innerHTML = element.getAttribute("data-tooltip");
tooltip.className = "tooltip";
tooltip.style.top = rect.top + element.clientHeight/2 + "px";
tooltip.style.left = rect.right + "px";
return tooltip;
}