# HoverCard

Import from `@pibbl/core/viz`. Supply a local `anchor` and required style width/height.
Card dimensions use core content-box sizing: padding adds to width and height.
Default padding is 10, cornerRadius 7, white fill at 92% opacity, and a subtle
one-pixel border. Background and content are drawn at ordinary source position;
place cards after the series. Decorations should use `pointerEvents="none"`.

The outer stroked card box stays clear of `anchorRadius` (default 0) plus `gap`
(default 8). Auto tries above, below, right, left; `placement` prefers a side.
It slides tangentially or flips, never across the anchor. If nothing fits it
allows overflow; ancestor clips still apply. `bounds` defaults to the incoming
allocation. Anchor, bounds, and card placement use the same local coordinate
frame. Explicitly transformed/overflowing child paint is outside the guarantee.

Signals may supply anchor, bounds, gap/radius, whole style, or style fields.
Interactive children retain their ordinary targets; the decorative background
passes pointer input through. No selection, pointer tracking, portal, or automatic
collision avoidance between cards is provided.

## API details from source

<span id="api-HoverCard"></span>

### HoverCard

Positions a declared card outside a protected anchor, allowing overflow if needed.

```ts
HoverCard: (props: HoverCardProps) => PibblNode
```

Related API: [HoverCard](/reference/components/hover-card/), [HoverCardProps](/reference/components/hover-card/), [PibblNode](/reference/types/elements-components/#pibblnode).

#### Parameters

- **`props`** — Anchor, placement, style, and hover-card content. See [HoverCardProps](/reference/components/hover-card/).

#### Returns

Pibbl content placed as a hover card. See [PibblNode](/reference/types/elements-components/#pibblnode).

#### See also

[HoverCardProps](/reference/components/hover-card/)

[PibblNode](/reference/types/elements-components/#pibblnode)

[View source — packages/core/src/features/viz/lib/hover-card.tsx:254](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L254)

<span id="api-HoverCardProps"></span>

### HoverCardProps

Authored inputs for HoverCard, including the declared data and presentation options.

```ts
interface HoverCardProps
```

Related API: [HoverCardProps](/reference/components/hover-card/).

#### See also

[SignalValue](/reference/types/signal-inputs/#signalvalue)

[HoverPoint](/reference/functions/closest-point/)

[HoverBounds](/reference/components/hover-card/)

[HoverPlacement](/reference/components/hover-card/)

`SignalStyle`

[HoverCardStyle](/reference/components/hover-card/)

[PibblNode](/reference/types/elements-components/#pibblnode)

[HoverCard](/reference/components/hover-card/)

[View source — packages/core/src/features/viz/lib/hover-card.tsx:75](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L75)

#### Properties and methods

<span id="api-HoverCardProps-anchor"></span>
<details>
<summary>anchor</summary>


```ts
readonly anchor: SignalValue<HoverPoint>
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [HoverPoint](/reference/functions/closest-point/).

Logical point to which the content or result is anchored. See SignalValue,
HoverPoint.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:80](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L80)

</details>

<span id="api-HoverCardProps-anchorRadius"></span>
<details>
<summary>anchorRadius (optional)</summary>


```ts
readonly anchorRadius?: SignalValue<number> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

Clearance around the anchor before placing the item. See SignalValue.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:82](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L82)

</details>

<span id="api-HoverCardProps-gap"></span>
<details>
<summary>gap (optional)</summary>


```ts
readonly gap?: SignalValue<number> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue).

Spacing between adjacent items. See SignalValue.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:84](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L84)

</details>

<span id="api-HoverCardProps-bounds"></span>
<details>
<summary>bounds (optional)</summary>


```ts
readonly bounds?: SignalValue<HoverBounds> | undefined
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [HoverBounds](/reference/components/hover-card/).

Logical region constraining the content or query. See SignalValue,
HoverBounds.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:89](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L89)

</details>

<span id="api-HoverCardProps-placement"></span>
<details>
<summary>placement (optional)</summary>


```ts
readonly placement?: HoverPlacement | undefined
```

Related API: [HoverPlacement](/reference/components/hover-card/).

Preferred placement relative to the anchor or containing geometry. See HoverPlacement
.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:94](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L94)

</details>

<span id="api-HoverCardProps-style"></span>
<details>
<summary>style</summary>


```ts
readonly style: SignalValue<Readonly<{ readonly width: SignalValue<number | `${number}%`>; readonly height: SignalValue<number | `${number}%`>; readonly padding?: SignalValue<EdgeValues | undefined>; readonly fill?: SignalValue<FillStyle | undefined>; readonly stroke?: SignalValue<StrokeStyle | undefined>; readonly strokeWidth?: SignalValue<number | undefined>; readonly cornerRadius?: SignalValue<number | undefined>; readonly opacity?: SignalValue<number | undefined>; readonly filter?: SignalValue<undefined>; readonly custom?: never; }>>
```

Related API: [SignalValue](/reference/types/signal-inputs/#signalvalue), [EdgeValues](/reference/types/layout/#edgevalues), [FillStyle](/reference/types/styles/#fillstyle), [StrokeStyle](/reference/types/styles/#strokestyle), [opacity](/reference/types/filters/#opacity).

Declared presentation and layout properties. See SignalValue, SignalStyle,
HoverCardStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:99](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L99)

</details>

<span id="api-HoverCardProps-children"></span>
<details>
<summary>children (optional)</summary>


```ts
readonly children?: PibblNode
```

Related API: [PibblNode](/reference/types/elements-components/#pibblnode).

Descendant content or the callback that supplies it. See PibblNode.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:101](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L101)

</details>

<span id="api-HoverCardStyle"></span>

### HoverCardStyle

Supported geometry and presentation properties for HoverCard.

```ts
interface HoverCardStyle
```

Related API: [HoverCardStyle](/reference/components/hover-card/).

#### See also

[BoxStyle](/reference/types/layout/#boxstyle)

[FillStyle](/reference/types/styles/#fillstyle)

[StrokeStyle](/reference/types/styles/#strokestyle)

[HoverCardProps](/reference/components/hover-card/)

[View source — packages/core/src/features/viz/lib/hover-card.tsx:34](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L34)

#### Properties and methods

<span id="api-HoverCardStyle-width"></span>
<details>
<summary>width</summary>


```ts
readonly width: number | `${number}%`
```

Horizontal extent in the units of the containing geometry or surface. See BoxStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:36](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L36)

</details>

<span id="api-HoverCardStyle-height"></span>
<details>
<summary>height</summary>


```ts
readonly height: number | `${number}%`
```

Vertical extent in the units of the containing geometry or surface. See BoxStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:38](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L38)

</details>

<span id="api-HoverCardStyle-padding"></span>
<details>
<summary>padding (optional)</summary>


```ts
readonly padding?: EdgeValues | undefined
```

Related API: [EdgeValues](/reference/types/layout/#edgevalues).

Insets between the border box and content box. See BoxStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:40](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L40)

</details>

<span id="api-HoverCardStyle-fill"></span>
<details>
<summary>fill (optional)</summary>


```ts
readonly fill?: FillStyle | undefined
```

Related API: [FillStyle](/reference/types/styles/#fillstyle).

Paint used for the interior. See FillStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:42](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L42)

</details>

<span id="api-HoverCardStyle-stroke"></span>
<details>
<summary>stroke (optional)</summary>


```ts
readonly stroke?: StrokeStyle | undefined
```

Related API: [StrokeStyle](/reference/types/styles/#strokestyle).

Paint used for the outline. See StrokeStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:44](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L44)

</details>

<span id="api-HoverCardStyle-strokeWidth"></span>
<details>
<summary>strokeWidth (optional)</summary>


```ts
readonly strokeWidth?: number | undefined
```

Width of the painted outline. See HoverCardStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:46](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L46)

</details>

<span id="api-HoverCardStyle-cornerRadius"></span>
<details>
<summary>cornerRadius (optional)</summary>


```ts
readonly cornerRadius?: number | undefined
```

Uniform corner radius used where no per-corner override is supplied. See
HoverCardStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:51](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L51)

</details>

<span id="api-HoverCardStyle-opacity"></span>
<details>
<summary>opacity (optional)</summary>


```ts
readonly opacity?: number | undefined
```

Related API: [opacity](/reference/types/filters/#opacity).

Opacity of the painted result. See HoverCardStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:53](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L53)

</details>

<span id="api-HoverCardStyle-filter"></span>
<details>
<summary>filter (optional)</summary>


```ts
readonly filter?: undefined
```

Not accepted in this variant; use the alternative fields instead. See HoverCardStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:57](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L57)

</details>

<span id="api-HoverCardStyle-custom"></span>
<details>
<summary>custom (optional)</summary>


```ts
readonly custom?: undefined
```

Not accepted in this variant; use the alternative fields instead. See HoverCardStyle.

[View source — packages/core/src/features/viz/lib/hover-card.tsx:61](/source/packages/core/src/features/viz/lib/hover-card-tsx/#L61)

</details>

<span id="api-HoverBounds"></span>

### HoverBounds

Logical bounds used to constrain hover-card placement.

```ts
interface HoverBounds
```

Related API: [HoverBounds](/reference/components/hover-card/).

#### See also

[HoverCardProps](/reference/components/hover-card/)

[PieLayoutProps](/reference/components/pie-layout/)

[View source — packages/core/src/features/viz/lib/hover-placement.ts:16](/source/packages/core/src/features/viz/lib/hover-placement-ts/#L16)

#### Properties and methods

<span id="api-HoverBounds-x"></span>
<details>
<summary>x</summary>


```ts
readonly x: number
```

Horizontal coordinate or displacement in the containing coordinate system. See
HoverBounds.

[View source — packages/core/src/features/viz/lib/hover-placement.ts:21](/source/packages/core/src/features/viz/lib/hover-placement-ts/#L21)

</details>

<span id="api-HoverBounds-y"></span>
<details>
<summary>y</summary>


```ts
readonly y: number
```

Vertical coordinate or displacement in the containing coordinate system. See
HoverBounds.

[View source — packages/core/src/features/viz/lib/hover-placement.ts:26](/source/packages/core/src/features/viz/lib/hover-placement-ts/#L26)

</details>

<span id="api-HoverBounds-width"></span>
<details>
<summary>width</summary>


```ts
readonly width: number
```

Horizontal extent in the units of the containing geometry or surface. See HoverBounds
.

[View source — packages/core/src/features/viz/lib/hover-placement.ts:31](/source/packages/core/src/features/viz/lib/hover-placement-ts/#L31)

</details>

<span id="api-HoverBounds-height"></span>
<details>
<summary>height</summary>


```ts
readonly height: number
```

Vertical extent in the units of the containing geometry or surface. See HoverBounds.

[View source — packages/core/src/features/viz/lib/hover-placement.ts:35](/source/packages/core/src/features/viz/lib/hover-placement-ts/#L35)

</details>

<span id="api-HoverPlacement"></span>

### HoverPlacement

Preferred side of an anchor, or automatic placement within available bounds.

```ts
type HoverPlacement = "auto" | "above" | "below" | "right" | "left"
```

Related API: [HoverPlacement](/reference/components/hover-card/).

#### See also

[HoverCardProps](/reference/components/hover-card/)

[View source — packages/core/src/features/viz/lib/hover-placement.ts:9](/source/packages/core/src/features/viz/lib/hover-placement-ts/#L9)

## Implementation guidance for agents

Read the [Data visualization companion](/agents/topics/visualization/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Hover inspection card](/minimal-examples/viz/hover-card/): Display a measured point in a bounded hover card. [Plain source](/minimal/viz/hover-card.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.