:host {
  position: absolute;
}

.tooltip {
  background-color: var(--color-ti-primary-black);
  color: var(--color-ti-white);
  display: none;
  filter: alpha(opacity=0);
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  max-width: 350px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  visibility: visible;
  white-space: normal;
  width: 200px;
  word-wrap: break-word;
  z-index: 1070;
}

.tooltip.active {
  display: block;
  opacity: 1;
}

.tooltip:after {
  border: 6px solid;
  border-color: transparent transparent var(--color-ti-primary-black)
    transparent;
  content: "";
  display: block;
  position: absolute;
}

.tooltip.top:after {
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 100%) rotate(180deg);
}

.tooltip.right:after {
  left: 0px;
  top: 50%;
  transform: translate(-100%, -50%) rotate(-90deg);
}

.tooltip.bottom:after {
  left: 50%;
  top: 0px;
  transform: translate(-50%, -100%);
}

.tooltip.left:after {
  right: 0px;
  top: 50%;
  transform: translate(100%, -50%) rotate(90deg);
}