<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js