JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<input id="sid" data-tip="sidTip" type="text" />
<span id="sidTip" class="hide">sidTip</span>
<br><br>
<input id="pwd1" data-tip="pwdTip" type="text" />
<span id="pwdTip" class="hide">pwdTip</span>

CSS

.hide { display: none; }

JavaScript

(function(){
	// Wrapped in a IIFE so these aren't public

  // TODO - Should these be part of the event?
  // Will we ever want to show and hide tips another way?
	function showTip(id) {
    document.getElementById(id).className = '';
  }
  
  function hideTip(id) {
    document.getElementById(id).className = 'hide';
  }
  
  // TODO - we can use event.type to make a single function  
  function prepShowTip(event) {
    showTip(this.dataset.tip);
  }
  
  function prepHideTip() {
  	hideTip(this.dataset.tip);
  }
  
  // Add event handlers to the element we received
  // TODO - Could this accept an array of elements?
  function addEvents(el){
	  // Should focus and blur disable/enable mouseenter/mouseleave?
  	el.addEventListener('mouseenter', prepShowTip);
   	el.addEventListener('focus', prepShowTip);
  	el.addEventListener('mouseleave', prepHideTip);
  	//el.onblur = prepHideTip;
    el.addEventListener('blur', prepHideTip);
  }

	function init(){
    // TODO -- can  we find all the elements
    // by looking for data-tip?
  	addEvents(document.getElementById('sid'));
  	addEvents(document.getElementById('pwd1'));
  }
  
  window.onload = init;

}())