I am trying to make a tooltip in plain JavaScript which is shown on hover
. Like the one in Stack Overflow on hover over the profile name a div
is shown.
I tried using onmouseover
, onmouseout
and added setTimeout
to give the user a few seconds to move mouse over the tooltip content. But it was not working as I thought.
I really like pure JavaScript more than using any libraries. Can some one help me out?
This is what I did in pure JavaScript.
HTML
<div class = "name" onmouseover="show()" onmouseout="hide()">
NAME
<div class = "tooltip">
PROFILE DETAILS
</div>
</div>
<div class = "name" onmouseover="show()" onmouseout="hide()">
NAME 2
<div class = "tooltip" >
PROFILE DETAILS 2
</div>
</div>
<div class = "name" onmouseover="show()" onmouseout="hide()">
NAME 3
<div class = "tooltip" >
PROFILE DETAILS 3
</div>
</div>
CSS
.name{
float:left;
margin:100px;
border:1px solid black;
}
.tooltip{
position:absolute;
margin:5px;
width:200px;
height:100px;
border:1px solid black;
display:none;
}
JavaScript
var name = document.getElementsByclassName("name");
var tp = document.getElementsByclassName("tooltip");
function show(){
tp.style.display="block";
}
function hide(){
tp.style.display="";
}