# Content

Renders `role="tooltip"` content through the native Popover API.

## Signatures

```ts
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

Native top-layer output avoids reparenting into a private portal while real
toggle/mouse/keyboard events synchronize renderer-independent state.

## Ownership and lifetime

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

## Examples

```ts
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.Content({ state, content: "Stores changes" })
})
```