Using @apply on group-hover styles in a stylesheet doesn't work

[gedi-t]

Hey all, I am new to Tailwind but I get my head around how it works as its pretty much straightforward, but today I got stuck on a simple issue.
Initially what I'm trying to achieve is to create a tooltip and it works if I use the TW classes in HTML, but I want to clean my code and create classes using @apply.

Working HTML

<div class="group cursor-pointer relative inline-block text-center">**Some text or item**
  <div class="opacity-0 w-72 overflow-ellipsis flex-wrap bg-white text-grey-1000 text-center text-md rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -left-1/2 ml-14 px-3 pointer-events-none shadow-lg transition duration-700 ease-in-out">
    **Tooltip text**
</div>

What I like to have the Some text or item to be just one class .tooltip-box and the Tooltip text tooltip popup to be .top-tooltip

Please tell me what I'm doing wrong

.tooltip-box {
  @apply group cursor-pointer relative inline-block;
}

.top-tooltip {
  @apply opacity-0 w-72 overflow-ellipsis flex-wrap bg-white text-grey-1000 text-center text-base rounded-lg py-2 absolute z-10 bottom-full -left-1/2 ml-14 px-3 pointer-events-none shadow-lg transition duration-700 ease-in-out;
  &:hover {
    @apply group-hover:opacity-100; **I also tried to put this without  &:hover.. but no luck**
  }
}