.right{
  @apply left-[calc(100%+0.5rem)] top-0 bottom-0 my-auto -translate-x-4;
}

.left{
  @apply right-[calc(100%+0.5rem)] top-0 bottom-0 my-auto translate-x-4;
}

.top{
  @apply bottom-[calc(100%+0.5rem)] left-0 right-0 mx-auto -translate-y-4;
}

.bottom{
  @apply top-[calc(100%+0.5rem)] left-0 right-0 mx-auto translate-y-4;
}

#wrapper{
  &:hover{
    #tooltip{
      @apply translate-x-0 translate-y-0 opacity-100 filter-none #{!important};
    }
  }
}