[Bug]: Tooltip and vue transition are not working together

[aleksey-hoffman]

Environment

Latest

Link to minimal reproduction

Nan

Steps to reproduce

Add force-mount to the portal and wrap the content with Vue transition that has a transform property

  <TooltipPortal force-mount>
    <Transition name="tooltip-bottom">
      <TooltipContent
        v-bind="{ ...forwarded, ...$attrs }"
        :class="['ui-tooltip-content', props.class]"
        :side="side"
      >
        <slot />
      </TooltipContent>
    </Transition>
  </TooltipPortal>

.tooltip-bottom-enter-active,
.tooltip-bottom-leave-active {
  transition: all 0.3s ease;
}

.tooltip-bottom-enter-from,
.tooltip-bottom-leave-to {
  opacity: 0;
  transform: translateY(30px) scale(0.5);
}

Describe the bug

On enter transition, the tooltip flies from the top of the window

Screen.Recording.2024-02-24.at.10.40.20.mov

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[Ericlm]

I'm having the exact same issue as shown; how could I solve this problem ? 🙂

[chasegiunta]

Try wrapping the Transition component in an absolute positioned parent div