Tooltip with Framer Motion
Abstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.
import "./style.css";
export default function Example() {
const href = "https://ariakit.org/examples/tooltip-framer-motion";
return (
className="link"
description={href}
render={<a href={href} />}
>
Tooltip with Framer Motion
);
}
Components
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.
You can learn more about this pattern on the Composition guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.