HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
PopoverView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA panel that opens against a trigger and holds anything.StableSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/popover'import'@fusion.dev/helix-headless/popover'Preview
API ReferenceRoothelix-popoverA panel that opens against a trigger and holds anything.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring"Popover"Accessible name for the panel.offsetnumber4Space between the trigger and the panel, in pixels.openbooleanWhether the element is open.placementPlacement"bottom-start"Preferred side.separation"plain"How the panel separates itself from what it floats over.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The contents of the panel.triggerWhat opens it.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionhide() => voidCloses the panel and puts focus back on the trigger.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidOpens the panel.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe scrolling region inside the panel.popoverThe panel.
CSS PropertyDescription--popover-border-colorColor of the panel's edge.--popover-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--popover-inline-sizeWidth of the panel.--popover-max-block-sizeTallest the panel grows before it scrolls.--popover-paddingSpace between the panel's edge and its contents.--popover-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
Roothelix-headless-popoverA panel that opens against a trigger and holds anything.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring"Popover"Accessible name for the panel.offsetnumber4Space between the trigger and the panel, in pixels.openbooleanWhether the element is open.placementPlacement"bottom-start"Preferred side.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The contents of the panel.triggerWhat opens it.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionhide() => voidCloses the panel and puts focus back on the trigger.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidOpens the panel.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe scrolling region inside the panel.popoverThe panel.
ExamplesNameDescriptionCommandedA popover opened by a button through the command attributes.EventsA panel anchored to its trigger, announcing before it moves and after.PlainNo arrow and no fill, for a panel that supplies its own.PreviewA panel anchored to what opened it.PreviewA panel anchored to what opened it.RoomyFurther from its trigger, for one that already carries a ring of its own.