Ariakit
/

Tooltip with Framer Motion

Abstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.

Open preview in a new tab
Tooltip with Framer Motion
Edit withViteNext.js
import "./style.css";
import { TooltipAnchor } from "./tooltip-anchor.jsx";
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.

<TooltipAnchor render={<a />} />

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.

Read latest issue

No Spam. Unsubscribe at any time.