function / @typed/ui

Hovercard.Content

Renders named, focusable hovercard content in the native top layer.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Native content host
Since
1.0.0
Member of
Hovercard

Import

import { Hovercard } from "@typed/ui";

Access Hovercard.Content through the imported Hovercard export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function Content<const Options extends ContentOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ContentInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Why

role="dialog" distinguishes interactive content from a tooltip. Native popover placement is retained, and focus/pointer transitions prevent closing while interaction remains inside the card.

Ownership and lifetime

Running the Fx owns handlers and NativePopover observation in its Scope. A custom host must preserve id, role, accessible name, manual popover, lifecycle handlers, and one hydration ref owner.

Examples

import { Effect } from "effect"
import * as Hovercard from "@typed/ui/Hovercard"

const program = Effect.gen(function* () {
  const state = yield* Hovercard.makeState({ id: "author-card" })
  return Hovercard.Content({ state, label: "Author", content: "Mathematician" })
})

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source