HoverCard

Read as Markdown

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

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

HoverCard: (props: HoverCardProps) => PibblNode

Related API: HoverCard, HoverCardProps, PibblNode.

Parameters

props — Anchor, placement, style, and hover-card content. See HoverCardProps.

Returns

Pibbl content placed as a hover card. See PibblNode.

HoverCardProps

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

interface HoverCardProps

Related API: HoverCardProps.

Properties and methods

anchor

readonly anchor: SignalValue<HoverPoint>

Related API: SignalValue, HoverPoint.

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

anchorRadius (optional)

readonly anchorRadius?: SignalValue<number> | undefined

Related API: SignalValue.

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

View source — packages/core/src/features/viz/lib/hover-card.tsx:82

gap (optional)

readonly gap?: SignalValue<number> | undefined

Related API: SignalValue.

Spacing between adjacent items. See SignalValue.

View source — packages/core/src/features/viz/lib/hover-card.tsx:84

bounds (optional)

readonly bounds?: SignalValue<HoverBounds> | undefined

Related API: SignalValue, HoverBounds.

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

View source — packages/core/src/features/viz/lib/hover-card.tsx:89

placement (optional)

readonly placement?: HoverPlacement | undefined

Related API: HoverPlacement.

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

View source — packages/core/src/features/viz/lib/hover-card.tsx:94

style

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, EdgeValues, FillStyle, StrokeStyle, opacity.

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

View source — packages/core/src/features/viz/lib/hover-card.tsx:99

children (optional)

readonly children?: PibblNode

Related API: PibblNode.

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

View source — packages/core/src/features/viz/lib/hover-card.tsx:101

HoverCardStyle

Supported geometry and presentation properties for HoverCard.

interface HoverCardStyle

Related API: HoverCardStyle.

Properties and methods

width

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

height

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

padding (optional)

readonly padding?: EdgeValues | undefined

Related API: EdgeValues.

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

View source — packages/core/src/features/viz/lib/hover-card.tsx:40

fill (optional)

readonly fill?: FillStyle | undefined

Related API: FillStyle.

Paint used for the interior. See FillStyle.

View source — packages/core/src/features/viz/lib/hover-card.tsx:42

stroke (optional)

readonly stroke?: StrokeStyle | undefined

Related API: StrokeStyle.

Paint used for the outline. See StrokeStyle.

View source — packages/core/src/features/viz/lib/hover-card.tsx:44

strokeWidth (optional)

readonly strokeWidth?: number | undefined

Width of the painted outline. See HoverCardStyle.

View source — packages/core/src/features/viz/lib/hover-card.tsx:46

cornerRadius (optional)

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

opacity (optional)

readonly opacity?: number | undefined

Related API: opacity.

Opacity of the painted result. See HoverCardStyle.

View source — packages/core/src/features/viz/lib/hover-card.tsx:53

filter (optional)

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

custom (optional)

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

HoverBounds

Logical bounds used to constrain hover-card placement.

interface HoverBounds

Related API: HoverBounds.

Properties and methods

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

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

width

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

height

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

HoverPlacement

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

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

Related API: HoverPlacement.

Implementation guidance for agents

Read the Data visualization companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Hover inspection card: Display a measured point in a bounded hover card. Plain source

Documentation version

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

HoverCard

API details from source

HoverCard

Parameters

Returns

See also

HoverCardProps

See also

Properties and methods

HoverCardStyle

See also

Properties and methods

HoverBounds

See also

Properties and methods

HoverPlacement

See also

Implementation guidance for agents

Complete minimal examples

Documentation version