Ariakit
/

Hovercard

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

@ariakitjs
import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
<div className="wrapper">
href="https://x.com/ariakitjs"
className="anchor"
>
@ariakitjs
<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
<p>Toolkit for building accessible web apps with React.</p>
<a href="https://x.com/ariakitjs" className="button primary flat">
Follow
</a>
</div>
);
}

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue