function / @typed/ui/Tooltip

Anchor

Renders a tooltip anchor with pointer and optional host-focus behavior.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Pointer and focus anchors
Since
1.0.0

Import

import { Anchor } from "@typed/ui/Tooltip";

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 that host tabindex, or supply a natively focusable custom host, to activate its direct focus, blur, and keydown handlers. Those events are attached to the host itself and do not observe focus on nested content. Tooltip content remains descriptive rather than an interactive dialog.

Ownership and lifetime

Running the Fx owns event listeners and dynamic relationship state in its Scope. Custom hosts must preserve aria-describedby and all handlers.

Examples

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

const program = Effect.gen(function* () {
  const state = yield* Tooltip.makeState({ id: "save-help" })
  return Tooltip.Anchor({
    state,
    content: "Save",
    props: { tabindex: 0 }
  })
})

Other public imports

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

Source