React Aria exposing state through the className is super handy. Here we’re using the placement returned to define a Tailwind CSS variable which we can then use in Motion to define its animation direction. View sandbox example here.
<TooltipTrigger isOpen={open} onOpenChange={setOpen}>
<Button>Trigger</Button>
<AnimatePresence>
{open ? (
<MotionTooltip
className={({ placement }) =>
cx({
"[--y:4px]": placement === "top",
"[--y:-4px]": placement === "bottom",
})
}
offset={6}
initial={{ opacity: 0, y: "var(--y)" }}
animate={{ opacity: 1, y: 0 }}
>
Content
</MotionTooltip>
) : null}
</AnimatePresence>
</TooltipTrigger>