Ariakit
/

Hovercard

Show a Popover with additional information when users hover over an element.

Hovercard
Edit example
Open preview in a new tab
@ariakitjs
import * as Ariakit from "@ariakit/react";

import "./style.css";



export default function Example() {

  return (

    <div className="wrapper">

      <Ariakit.HovercardProvider>

        <Ariakit.HovercardAnchor

          href="https://x.com/ariakitjs"

          className="anchor"

        >

          @ariakitjs

        </Ariakit.HovercardAnchor>

        <Ariakit.Hovercard gutter={16} className="hovercard">

          <img

            src="https://pbs.twimg.com/profile_images/1547936373243490306/dSn6Am0o_400x400.jpg"

            alt="Ariakit"

            className="avatar"

          />

          <Ariakit.HovercardHeading className="username">

            Ariakit

          </Ariakit.HovercardHeading>

          <p>Toolkit for building accessible web apps with React.</p>

          <a href="https://x.com/ariakitjs" className="button primary flat">

            Follow

          </a>

        </Ariakit.Hovercard>

      </Ariakit.HovercardProvider>

    </div>

  );

}

API

useHovercardStore()

useHovercardContext()



<HovercardProvider>

  <HovercardAnchor />

  <HovercardDisclosure />

  <Hovercard>

    <HovercardArrow />

    <HovercardHeading />

    <HovercardDescription />

    <HovercardDismiss />

  </Hovercard>

</HovercardProvider>

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠