Tooltip with Framer Motion

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

Tooltip Animated Framer Motion

Edit example

12345678910111213141516
import "./style.css";
import { TooltipAnchor } from "./tooltip-anchor.tsx";

export default function Example() {
  const href = "https://ariakit.org/examples/tooltip-framer-motion";
  return (
    <TooltipAnchor
      className="link"
      description={href}
      render={<a href={href} />}
    >
      Tooltip with Framer Motion
    </TooltipAnchor>
  );
}

import "./style.css";
import { TooltipAnchor } from "./tooltip-anchor.tsx";

export default function Example() {
  const href = "https://ariakit.org/examples/tooltip-framer-motion";
  return (
    <TooltipAnchor
      className="link"
      description={href}
      render={<a href={href} />}
    >
      Tooltip with Framer Motion
    </TooltipAnchor>
  );
}

Components

TooltipDisplay visual information related to an anchor element when the element receives keyboard focus or the mouse hovers over it.

View all 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 />} />
<TooltipAnchor render={<a />} />

You can learn more about this pattern on the Composition guide.

Related examples

Menu with Framer MotionAbstracting Menu into a reusable dropdown menu component that uses Framer Motion to create smooth initial and exit animations.

Dialog with Framer MotionUsing Framer Motion to add initial and exit animations to a modal Dialog and its backdrop element.

Menu with TooltipRendering Menu with a Tooltip that appears when hovering over the MenuButton component by combining it with the TooltipAnchor component.

View all examples

Tooltip with Framer Motion

Components

Composing with other components

Related examples

Stay tuned