Surfacesduskmoonimplemented5 demos

Popover

Popover shows rich contextual content attached to a trigger.

Import@duskmoon-dev/components/popover

3API sections

10documented props

3behavior scenarios

Key API

titlecontentplacementtriggeropendefaultOpen

Usage

When to use

Use it when supporting content should stay attached to a trigger or task context.
Prefer controlled open state when the surrounding workflow needs to react to dismissal.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Contextual surface

Documents trigger, placement, and open-state patterns for content rendered above the page.

Dismissal behavior

Highlights controlled state and close callbacks where overlays expose them.

Primary API surface

Popover is most often configured through `title`, `content`, `placement`, `trigger`.

Covered behavior

Renders title/content when hover opens and closes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Popover from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Popover } from "@duskmoon-dev/components/popover";

export function Example() {
  return (<Popover
  title="DuskMoon"
  content="Popover content"
  placement="bottom"
  open
>
  Hover target
</Popover>);
}

Preview

Renders title/content when hover opens and closes

test-backed

Popover scenario from the component test coverage: renders title/content when hover opens and closes.

Source

import "@duskmoon-dev/components/styles.css";
import { Popover } from "@duskmoon-dev/components/popover";

export function PopoverRendersTitleContentWhenDemo() {
  return (<Popover
  title="DuskMoon"
  content="Popover content"
  placement="bottom"
  open
>
  Hover target
</Popover>);
}

Preview

Supports destroy-on-hide behavior

test-backed

Popover scenario from the component test coverage: supports destroy-on-hide behavior.

Source

import "@duskmoon-dev/components/styles.css";
import { Popover } from "@duskmoon-dev/components/popover";

export function PopoverSupportsDestroyOnHideDemo() {
  return (<Popover
  title="DuskMoon"
  content="Popover content"
  placement="bottom"
  open
>
  Hover target
</Popover>);
}

Preview

Supports controlled open state

test-backed

Popover scenario from the component test coverage: supports controlled open state.

Source

import "@duskmoon-dev/components/styles.css";
import { Popover } from "@duskmoon-dev/components/popover";

export function PopoverSupportsControlledOpenStateDemo() {
  return (<Popover
  title="DuskMoon"
  content="Popover content"
  placement="bottom"
  open
>
  Hover target
</Popover>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Popover
  title="DuskMoon"
  content="Popover content"
  placement="bottom"
  open
>
  Hover target
</Popover>
</div>

<div data-theme="moonlight">
  <Popover
  title="DuskMoon"
  content="Popover content"
  placement="bottom"
  open
>
  Hover target
</Popover>
</div>

API

The API reference below lists every parsed exported type or interface for Popover. Start with `title`, `content`, `placement`, `trigger` for common usage.

Types: packages/components/src/components/popover/Popover.types.tsScenarios: packages/components/src/components/popover/Popover.test.tsx

PopoverPropsinterface extends Omit< ComponentProps<"span">, "children" | "content" | "title" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Popover.
`content`	`ReactNode`	No	content configures Popover.
`placement`	`PopoverPlacement`	No	placement configures Popover.
`trigger`	`PopoverTrigger`	No	trigger configures Popover.
`open`	`boolean`	No	open configures Popover.
`defaultOpen`	`boolean`	No	defaultOpen configures Popover.
`arrow`	`boolean`	No	arrow configures Popover.
`destroyTooltipOnHide`	`boolean`	No	destroyTooltipOnHide configures Popover.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures Popover.
`children`	`ReactNode`	Yes	children configures Popover.

PopoverPlacementtype

"top" | "bottom" | "left" | "right"

PopoverTriggertype

"hover" | "focus" | "click" | "contextmenu"