JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="bounds">
    <select title="title one">
    <option>blah</option>
    <option>blah</option>
    <option>blah</option>
</select>
</div>
<div class="bounds">
<select title="title two">
    <option>blah</option>
    <option>blah</option>
    <option>blah</option>
</select>
</div>

CSS

body {margin:50px;}
.bounds {display:inline-block; position:relative;}

JavaScript

var SelectBoxTip = {
    init : function(){
        SelectBoxTip.createTip();
        SelectBoxTip.addListeners();
    },
    addListeners : function(){
        var selects = document.getElementsByTagName("select");
        for (var i = 0; i < selects.length; i++){
            var zis = selects[i];
            if(zis.getAttribute('title')){//only if it has a title
                zis.addEventListener("focus", SelectBoxTip.showTip, false);
                zis.addEventListener("blur", SelectBoxTip.hideTip, false);
            }
        }
    },
    createTip : function(){
        tip = document.createElement("div");
        tip.id = "tip";
        tip.style.position = "absolute";
        tip.style.bottom = "100%";
        tip.style.left = "0";
        tip.style.backgroundColor = "yellow";
        document.body.appendChild(tip);
    },
    showTip : function(e){
        this.parentNode.appendChild(tip);
        tip.innerHTML=this.title;   
        tip.style.display="block";
    },
    hideTip : function(e){
        tip.style.display="none";
    }
};
SelectBoxTip.init();