Ariakit
/
This site is under construction Subscribe to updates

Tooltip with Framer Motion

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

Tooltip with Framer Motion
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.