# Hover Card
{"@data-slot"}
{"Headless UI components for vanilla JavaScript."}
{" Created by Bejamas in 2026 "}
```astro --- ---
@data-slot
Headless UI components for vanilla JavaScript.
Created by Bejamas in 2026
``` ## Installation ```bash bunx bejamas add hover-card ``` ```bash npx bejamas add hover-card ``` ```bash pnpm dlx bejamas add hover-card ``` ```bash yarn dlx bejamas add hover-card ``` ## Usage ```astro nocollapse --- ---
@nextjs
The React Framework - created and maintained by @vercel.
 ``` ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | | defaultOpen | `boolean` | `false` | | delay | `number` | `700` | | skipDelayDuration | `number` | `300` | | closeDelay | `number` | `300` | | closeOnClickOutside | `boolean` | `true` | | closeOnEscape | `boolean` | `true` | ## Examples ### With Avatar
@thom TK
@thom

Building design systems and UI tooling.

```astro --- --- @thom TK
@thom

Building design systems and UI tooling.

``` ### Different sides
{"Appears on left."} {"Appears on top."} {"Appears on bottom."} {"Appears on right."}
```astro --- ---
Appears on left. Appears on top. Appears on bottom. Appears on right.
``` ### Positioning options Configure placement options on `HoverCardContent`:
{" Uses content-level positioning options. "}
```astro --- --- Uses content-level positioning options. ``` ### Custom timing
{" Opens after 600ms, closes after 200ms. "}
```astro --- --- Opens after 600ms, closes after 200ms. ``` ## API Reference ### Events The hover card emits custom events that you can listen to: | Event | Detail | Description | |-------|--------|-------------| | `hover-card:change` | `{ open: boolean, reason: string, trigger: HTMLElement, content: HTMLElement }` | Fired when visibility changes |
{" Hover card content "} 
Waiting for logs...
```astro nocollapse console Hover card content ``` ### Programmatic Control You can control the hover card programmatically by dispatching a `hover-card:set` event: ```js nocollapse const hoverCard = document.getElementById('my-hover-card'); // Open the hover card hoverCard.dispatchEvent(new CustomEvent('hover-card:set', { detail: { open: true } })); // Close the hover card hoverCard.dispatchEvent(new CustomEvent('hover-card:set', { detail: { open: false } })); ``` ### Data Attributes The hover card sets these data attributes that you can use for styling or querying state: | Attribute | Element | Description | |-----------|---------|-------------| | `data-state` | hover-card, hover-card-content | Current state (`open` or `closed`) | | `data-open` | hover-card, hover-card-content | Present while open | | `data-closed` | hover-card, hover-card-content | Present while closed | | `data-side` | hover-card-content | Position relative to trigger (`top`, `right`, `bottom`, or `left`) | | `data-align` | hover-card-content | Alignment (`start`, `center`, or `end`) | | `data-side-offset` | hover-card-content | Distance from trigger in pixels (default `4`) | | `data-align-offset` | hover-card-content | Alignment-axis offset in pixels (default `0`) |