Jokele
@jokele.bsky.social
I'm pursuing penetration testing as a way to earn money, while working with Remix, TypeScript, and TanStack purely for fun.
Reposted by Jokele
React Aria exposing state through the className is super handy. Here we're using the placement returned to define a TW CSS variable which we can then use in Motion to define its animation direction. codesandbox.io/p/sandbox/zw...
![<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>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3pkhtaz3o3wcruiytf3s2c5/bafkreifwd4ua2kp7y2b4exzxfyqflb3xsjmkgopnb6x6r43v3qhzqwrrgi@jpeg)
February 20, 2025 at 12:09 PM
React Aria exposing state through the className is super handy. Here we're using the placement returned to define a TW CSS variable which we can then use in Motion to define its animation direction. codesandbox.io/p/sandbox/zw...