Tooltip with Motion

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

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

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

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

export default function Example() {
  const href = "https://ariakit.com/examples/tooltip-framer-motion";
  return (
    <TooltipAnchor
      className="link"
      description={href}
      render={<a href={href} />}
    >
      Tooltip with 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 MotionAbstracting Menu into a reusable dropdown menu component that uses Motion to create smooth initial and exit animations.

Dialog with MotionUsing 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 Motion

Components

Composing with other components

Related examples

Stay tuned