Tooltip with Framer Motion
Abstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.
import { TooltipAnchor } from "./tooltip-anchor.jsx";
import "./style.css";
export default function Example() {
const href = "https://ariakit.org/examples/tooltip-framer-motion";
return (
<TooltipAnchor
description={href}
className="link"
render={(props) => <a href={href} {...props} />}
>
Tooltip with Framer Motion
</TooltipAnchor>
);
}
Composing with other components
In the custom TooltipAnchor
component we've created in this example, we're exposing the render
prop to allow the user to render the anchor element however they want.
<TooltipAnchor render={(props) => <a {...props} />} />
You can learn more about this pattern on the Composition guide.