Pure CSS Tooltip

base.css

/* tooltip */
.tooltip-enabled {
  position:relative;
}
.tooltip-enabled:after {
  content: attr(data-help);
  pointer-events:none;
  text-align:left;
  background: rgba(0,0,0,0.85);
  box-shadow:	0 0 2px rgba(255,255,255,0.5);
  border-radius: 2px;
  display:none;
  max-width:200px;
  color:#fff;
  font-size:13px;
  white-space:pre;
  line-height:1.25;
  vertical-align: middle;
  padding:10px;
  margin:0;
  text-shadow:0 1px 0 rgba(0,0,0,0.75);
  position:absolute;
  z-index:1;
  bottom:160%;
  left:50%;
  transform:translateX(-50%);
}
.tooltip-enabled:hover:before {
  display:block;
  content:"";
  width:0;
  height:0;
  border-top:6px solid rgba(0,0,0,0.85);
  border-right:6px solid transparent;
  border-left:6px solid transparent;
  position:absolute;
  top:-60%;
  left:50%;
  margin-left:-6px;
  z-index:2;
}
.tooltip-enabled:hover:after {
  display:inline-block;
}