Import
import { Hovercard } from "@typed/ui";Access Hovercard.Anchor 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 Anchor<const Options extends AnchorOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, AnchorInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;Why
The default host is a non-focusable <span>, so it provides pointer behavior
only. Give the span tabindex, or supply a natively focusable custom host,
for direct focus, blur, and keydown handling. Unlike a tooltip, hovercard
content may receive focus; host blur checks relatedTarget and stays open
while focus moves inside the card. Nested-anchor focus does not bubble.
Ownership and lifetime
Running the Fx owns real DOM handlers and dynamic relationships in its Scope.
Custom hosts must preserve aria-controls and all supplied handlers.
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.Anchor({
state,
content: "Ada Lovelace",
props: { tabindex: 0 }
})
})Other public imports
These import paths expose the same declaration. Each page retains its own public name and signature.