Ariakit
/

Hovercard

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

Open preview in a new tab
@ariakitjs
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
return (
<div className="wrapper">
href="https://twitter.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://twitter.com/ariakitjs"
className="button primary flat"
>
Follow
</a>
</div>
);
}

API

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue

No Spam. Unsubscribe at any time.