.tip {

position: relative;
border-bottom: 1px dotted lighten($body-text-color, 10%);

}

.tip::after {

position: absolute;
z-index: $tooltip-z-index;
display: none;
padding: 5px 8px;
font: normal normal ($body-font-size * .75) $sans-serif-font-stack;
line-height: $base-line-height;
color: $tooltip-text-color;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background-color: $tooltip-bg-color;
border-radius: 3px;
opacity: 0;
-webkit-font-smoothing: subpixel-antialiased;

}

.tip::before {

position: absolute;
z-index: ($tooltip-z-index + 1);
display: none;
width: 0;
height: 0;
color: $tooltip-bg-color;
pointer-events: none;
content: "";
border: 5px solid transparent;
opacity: 0;

}

@keyframes tooltip-fade {

from { opacity: 0; }

to { opacity: 1; }

}

.tip:hover, .tip:active, .tip:focus {

&::before,
&::after {
  display: inline-block;
  text-decoration: none;
  animation-name: tooltip-fade;
  animation-duration: $tooltip-duration;
  animation-timing-function: ease-in;
  animation-delay: $tooltip-delay;
  animation-fill-mode: forwards;
}

}

.tip-bottom {

&::after {
  top: 100%;
  right: 50%;
  margin-top: 5px;
}

&::before {
  top: auto;
  right: 50%;
  bottom: -5px;
  margin-right: -5px;
  border-bottom-color: $tooltip-bg-color;
}

}

.tip-top {

&::after {
  right: 50%;
  bottom: 100%;
  margin-bottom: 5px;
}

&::before {
  top: -5px;
  right: 50%;
  bottom: auto;
  margin-right: -5px;
  border-top-color: $tooltip-bg-color;
}

}

.tip-bottom::after, .tip-top::after {

transform: translateX(50%);

}

.tip-left {

&::after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  transform: translateY(50%);
}

&::before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: $tooltip-bg-color;
}

}

.tip-right {

&::after {
  bottom: 50%;
  left: 100%;
  margin-left: 5px;
  transform: translateY(50%);
}

&::before {
  top: 50%;
  right: -5px;
  bottom: 50%;
  margin-top: -5px;
  border-right-color: $tooltip-bg-color;
}

}