<div id="i-have-a-tooltip" data-description="I'm a tooltip!">
I have a tooltip. <br>Hover over me to see it.
</div>
* {
margin:0;
box-sizing:border-box;
}
body {
background-color:#efefef;
}
#i-have-a-tooltip {
width:350px;
font-family:Helvetica,Arial,sans-serif;
font-weight:100;
font-size:20px;
text-align:center;
padding:50px;
margin:100px auto;
background:white;
position:relative;
border-radius:5px;
box-shadow:10px 10px 0px rgba(0,0,0,.05);
}
#i-have-a-tooltip:before {
content:attr(data-description);
box-sizing:border-box;
display:block;
background:rgba(0,0,0,.7);
color:white;
padding:20px;
position:absolute;
left:50%;
top:-30px;
margin-left:-100px;
width:200px;
height:65px;
line-height:25px;
border-radius:5px;
opacity:0;
transition:.25s ease-in-out;
}
#i-have-a-tooltip:after {
content:'';
display:block;
position:absolute;
top:35px;
left:50%;
margin-left:-8px;
height:0;
width:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid rgba(0,0,0,.7);
transition:.25s ease-in-out;
opacity:0;
}
#i-have-a-tooltip:hover:before {
opacity:1;
top:-50px;
}
#i-have-a-tooltip:hover:after {
opacity:1;
top:15px;
}
This Pen doesn't use any external CSS resources.