There is probably a lot of place for improvement, but you get the point : one element, custom tooltip.

index.html

<span class="tooltip" data-tooltip="Hi! I'm a tooltip!">Hover me</span>

style.scss

@import "compass";
$background-color: #08C;
$border: 1px solid rgba(0,0,0,0.5);
$border-radius: 3px;
$inset-padding: 3px;
$font-color: white;
$font-size: 0.8em;
$line-height: 1.3;

body {
  padding: 80px;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size: 16px;
  color: #333;
}

.tooltip {
  display: inline-block;
  position: relative;
  cursor: pointer;
  border-bottom: dotted 1px grey;
  padding-bottom: 2px;
}

.tooltip:after {
  content: attr(data-tooltip);
  display: block;
  position: absolute;
  color: $font-color;
  background: $background-color;
  padding: $inset-padding;
  border-radius: $border-radius;
  bottom: 138%;
  text-align: center;
  display: none;
  font-size: $font-size;
  line-height: $line-height;
  border: $border;
}

.tooltip:before {
  content: "";
  background: $background-color;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  top: -12px;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  display: none;
  z-index: 2;
  border-right: $border;
  border-bottom: $border;
}

.tooltip:hover:after,
.tooltip:hover:before {
  display: block;
}