tooltip {
  position       : absolute;
  top            : -100vw;
  left           : -100vw;
  visibility     : hidden;
  opacity        : 0;
  transition     : opacity 0.5s, visibility 0s 0.5s, left 0s 0.5s, top 0s 0.5s;
  background     : rgba(0, 0, 0, 0.85);
  color          : white;
  padding        : 5px 10px;
  transform      : translate(-50%, -100%);
  pointer-events : none;
  border-radius  : 3px;
  width          : auto;
  display        : flex;
  z-index        : 1000;
}

tooltip::before {
  content    : '';
  display    : block;
  width      : 7px;
  height     : 7px;
  transform  : translate(-50%, 50%);
  position   : absolute;
  bottom     : 0px;
  left       : 50%;
  background : rgba(0, 0, 0, 0.85);
  clip-path  : polygon(0% 50%, 100% 50%, 50% 100%);
}

tooltip.--shown {
  visibility : visible;
  opacity    : 1;
  transition : opacity 0.25s 0.5s, visibility 0s 0s, left 0s 0.5s, top 0s 0.5s;
}