overlayspopover

Popover

Click-triggered floating content panel anchored to a trigger element.

Import#

import { Popover } from 'moraine'

Slot Structure#

Wrapper trigger with a floating content portal containing the body.

trigger
└── content (portal)
    └── body

Examples#

Placements#

Click trigger with four placement variants.

1
function Placements() {
2
  const PLACEMENTS = ['top', 'right', 'bottom', 'left'] as const
3

4
  return (
5
    <div class="flex flex-wrap gap-3 items-center">
6
      <For each={PLACEMENTS}>
7
        {(placement) => (
8
          <Popover
9
            placement={placement}
10
            content={
11
              <div class="space-y-1">
12
                <p class="text-sm font-medium capitalize">{placement}</p>
13
                <p class="text-xs text-muted-foreground">Popover content aligned to {placement}.</p>
14
              </div>
15
            }
16
          >
17
            <Button variant="outline" size="sm">
18
              {placement}
19
            </Button>
20
          </Popover>
21
        )}
22
      </For>
23
    </div>
24
  )
25
}

Hover Mode#

Hover-based popover using open and close delays.

1
function HoverMode() {
2
  return (
3
    <div class="flex flex-wrap gap-3 items-center">
4
      <Popover
5
        mode="hover"
6
        openDelay={180}
7
        closeDelay={120}
8
        content={
9
          <div class="space-y-1">
10
            <p class="text-sm font-medium">Hover Card</p>
11
            <p class="text-xs text-muted-foreground">
12
              This popover opens on hover and closes after delay.
13
            </p>
14
          </div>
15
        }
16
      >
17
        <Button variant="outline">Hover me</Button>
18
      </Popover>
19
    </div>
20
  )
21
}

Dismiss Control#

Prevent closing on outside interaction and Escape key.

1
function DismissControl() {
2
  const [preventedCloseCount, setPreventedCloseCount] = createSignal(0)
3

4
  return (
5
    <div class="flex flex-wrap gap-3 items-center">
6
      <Popover
7
        defaultOpen
8
        dismissible={false}
9
        onClosePrevent={() => setPreventedCloseCount((value) => value + 1)}
10
        content={
11
          <div class="space-y-1">
12
            <p class="text-sm font-medium">Persistent popover</p>
13
            <p class="text-xs text-muted-foreground">
14
              Prevented close attempts: {preventedCloseCount()}
15
            </p>
16
          </div>
17
        }
18
      >
19
        <Button variant="secondary">Try close me</Button>
20
      </Popover>
21
    </div>
22
  )
23
}

API Reference#

Attributes#

Slottrigger3 attributes

Element users activate to open the popover.

ARIA Attributes

ARIA Attribute	Description
aria-controls	References the controlled element while the related content is mounted.
aria-describedby	References descriptive text associated with the control.
aria-expanded	Indicates whether the controlled content is expanded.

Props#

Prop	Type	Default	Description
children	`JSX.Element`	—	The reference element that triggers the popover.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`PopoverT.Classes \| undefined`	—	—
closeDelay	`number \| undefined`	`100`	Delay in milliseconds before closing in hover mode.
content	`JSX.Element`	—	Content to render inside the popover body.
defaultOpen	`boolean \| undefined`	—	—
dismissible	`boolean \| undefined`	—	—
forceMount	`boolean \| undefined`	—	—
id	`string \| undefined`	—	—
modal	`boolean \| undefined`	—	—
mode	`PopoverMode \| undefined`	`click`	Interaction mode for triggering the popover.
onClosePrevent	`(() => void) \| undefined`	—	—
onOpenChange	`((open: boolean) => void) \| undefined`	—	—
open	`boolean \| undefined`	—	—
openDelay	`number \| undefined`	`100`	Delay in milliseconds before opening in hover mode.
placement	`Placement \| undefined`	—	—
preventScroll	`boolean \| undefined`	—	—
ref	`JSX.HTMLElementTags["span"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
side	`"bottom" \| "top" \| "right" \| "left" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`PopoverT.Styles \| undefined`	—	—