Search documentation

Search by topic, API name, or import path.

GitHub ↗

function / @typed/ui/index

Tooltip.Anchor

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

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Pointer and focus anchors
Since
1.0.0
Member of
Tooltip

Import

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

Access Tooltip.Anchor through the imported Tooltip 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 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