.tooltip {
  position: relative;
}

.tooltip:hover:after,
.tooltip:focus:after,
.tooltip:active:after {
  background-color: rgba( 0, 0, 0, .6 );
  border-radius: 0.2rem;
  color: rgb( 255, 255, 255 );
  content: attr( data-tooltip );
  font-size: inherit;
  padding: 0.4rem 1rem;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
}

.tooltip-l-top:hover:after,
.tooltip-l-top:focus:after,
.tooltip-l-top:active:after {
  bottom: 100%;
}

.tooltip-l-bottom:hover:after,
.tooltip-l-bottom:focus:after,
.tooltip-l-bottom:active:after {
  top: 100%;
}

.tooltip-l-right:hover:after,
.tooltip-l-right:focus:after,
.tooltip-l-right:active:after {
  left: 100%;
}

.tooltip-l-left:hover:after,
.tooltip-l-left:focus:after,
.tooltip-l-left:active:after {
  right: 100%;
}

.tooltip-t-primary:hover:after,
.tooltip-t-primary:focus:after,
.tooltip-t-primary:active:after {
  background-color: rgba( 0, 0, 0, .6 );
  color: rgb( 255, 255, 255 );
}

.tooltip-t-secondary:hover:after,
.tooltip-t-secondary:focus:after,
.tooltip-t-secondary:active:after {
  background-color: rgba( 255, 255, 255, 0.8 );
  color: rgb( 0, 0, 0 );
}

.tooltip-t-small:hover:after,
.tooltip-t-small:focus:after,
.tooltip-t-small:active:after {
  font-size: 0.875rem;
}

.tooltip-t-medium:hover:after,
.tooltip-t-medium:focus:after,
.tooltip-t-medium:active:after {
  font-size: 1rem;
}

.tooltip-t-large:hover:after,
.tooltip-t-large:focus:after,
.tooltip-t-large:active:after {
  font-size: 1.125rem;
}