Ariakit
/

Hovercard with keyboard support

Using the HovercardDisclosure component to render a Hovercard that can be opened with the keyboard.

Focus on @ariakitjs using the keyboard to see the disclosure button.

import * as Ariakit from "@ariakit/react";
import "./style.css";
const chevronDown = (
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
/>
</svg>
);
export default function Example() {
const element = (
<span className="hovercard-wrapper">
href="https://x.com/ariakitjs"
className="anchor"
>
@ariakitjs
<Ariakit.HovercardDisclosure className="disclosure">
More details about @ariakitjs
{chevronDown}
<Ariakit.Hovercard portal 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>
</span>
);
return (
<p>Focus on {element} using the keyboard to see the disclosure button.</p>
);
}

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue