JSFiddle - React, Tailwind, and code Playground

by mohamed taher

HTML

<div id="mydiv"> this is just a div </div>

CSS

#mydiv
{
    background-color:yellow;
    width:300px;
    height:50px;
    position:absolute;
}

.tooltip
{
    display:inline-block;
    white-space: nowrap;
    position:absolute;
    background-color:red;
    width:auto;
    height:auto;
    z-index:99;
    left:100%;
}

JavaScript

//Auxiliary functions
function createToolTip(divName,tips)
{
 document.getElementById(divName).innerHTML+='<div class="tooltip">'+tips+'</div>' 
}
function removeToolTip(divName)
{
document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0])
}
function Tooltip(divName,tips)
{
document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)}

document.getElementById(divName).onmouseout=function(){removeToolTip(divName)}
}

//Sample Usage
Tooltip("mydiv","hello im a tip div")