You can toggle a child div during onmouseover
and onmouseout
like this:
function Tooltip(el, text) {
el.onmouseover = function() {
el.innerHTML += '<div class="tooltip">' + text + '</div>'
}
el.onmouseout = function() {
el.removeChild(el.querySelector(".tooltip"))
}
}
//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")
function Tooltip(el, text) {_x000D_
el.onmouseover = function() {_x000D_
el.innerHTML += '<div class="tooltip">' + text + '</div>'_x000D_
}_x000D_
el.onmouseout = function() {_x000D_
el.removeChild(el.querySelector(".tooltip"))_x000D_
}_x000D_
}_x000D_
_x000D_
//Sample Usage_x000D_
Tooltip(document.getElementById("mydiv"), "I'm a tooltip")
_x000D_
#mydiv {_x000D_
position: relative;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
width: 120px;_x000D_
height: 50px;_x000D_
padding: 5px 10px;_x000D_
background-color: #e2f7ff;_x000D_
box-shadow: 1px 1px 1px 0px #cecece;_x000D_
}_x000D_
_x000D_
.tooltip {_x000D_
position: absolute;_x000D_
display: inline-block;_x000D_
white-space: nowrap;_x000D_
width: auto;_x000D_
height: auto;_x000D_
background-color: #11121b;_x000D_
color: white;_x000D_
padding: 4px 6px;_x000D_
border-radius: 3px;_x000D_
z-index: 99;_x000D_
left: 100%;_x000D_
top: 0;_x000D_
}
_x000D_
<div id="mydiv"> This is just a div </div>
_x000D_