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

.tooltip:after {
  content: attr(data-tooltip);
  color:#666;
  position: absolute;
  color: black;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 10px;
  bottom: 138%;
  text-align: center;
  display: none;
  top:-10px;
  left:0;
  height:auto;
  font-size: 0.8em;
  line-height: 1.3;
  border: 1px solid #ccc;
}

.tooltip:hover:after,
.tooltip:hover:before {
  display: inline-table;
}