Pure CSS tooltip

Just a quick concept of doing tooltip without any javascript.

by jessekinsman

HTML

<div class="container">
  <a href="#" class="tooltip below" title="Tooltip 1">Test a tooltip 1 with longer text</a> <br />
</div>
<div class="container">
    <a href="#" class="tooltip above" title="Tooltip 2">Test a tooltip 2 with longer text</a><br />
    <a href="#" class="tooltip above" title="Tooltip 3">Test a tooltip 3 with longer text</a>
</div>

CSS

.container {
  padding: 2em;
  width: 300px;
  height: 50px;
}
a:hover {
  position: relative;
  color: #777;
}

.tooltip[title]:hover:after {
  content: attr(title);
  background: #d9167e;
  color: #fff;
  padding: 4px 8px;
  position: absolute;
  z-index: 20;
  width: 100px;
  text-align: center;
  left: calc(50% - 50px);
}

.tooltip[title]:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 20;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.tooltip.below[title]:hover:after {
  top: calc(100% + 5px);
}

.tooltip.below[title]:hover:before {
  top: 100%;
  border-bottom: 5px solid #d9167e;
}

.tooltip.above[title]:hover:after {
  bottom: calc(100% + 5px);
}

.tooltip.above[title]:hover:before {
  bottom: 100%;
  border-top: 5px solid #d9167e;
}