Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Project identity
  • With close button
  • Tooltip style
  • Animated popovers
  • Controlled and keep mounted
  • Positions
  • Disabled
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Popover

Places focused interactive content beside a trigger.

idle

Usage

import {
	Popover,
	PopoverClose,
	PopoverDescription,
	PopoverPopup,
	PopoverTitle,
	PopoverTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Popover>
	<PopoverTrigger />
	<PopoverPopup>
		<PopoverTitle />
		<PopoverDescription />
		<PopoverClose />
	</PopoverPopup>
</Popover>

Examples

Project identity

Edit the name teammates see in the workspace.

With close button

Dismiss from the header or the action.

Tooltip style

Compact information on hover, focus, or click.

Animated popovers

Share one popup between detached triggers.

Controlled and keep mounted

Retain a draft across close and reopen.

Positions

Anchor to each side and avoid viewport edges.

Disabled

Unavailable triggers do not open.

Recommendations

GuidancePractice
Do

Keep the content tied to its trigger. Use a title when the popup presents a task or settings.

Usage boundaries

GuidanceBoundary
Scope

Use Tooltip for brief noninteractive help. Use Dialog when the task needs modal focus.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
PopoverPopoverProps<Payload>—Native Base UI root with controlled, modal, and detached-trigger state.
PopoverTriggerPopoverTriggerProps<Payload>—Native trigger with render, disabled, hover, and payload props.
PopoverPopupPopoverPopupProps—Popup with render, focus behavior, positioning, portalProps, and tooltipStyle.
tooltipStylebooleanfalseUses compact tooltip typography and padding.
side"top" | "bottom" | "left" | "right"bottomPositions relative to the trigger.
align"start" | "center" | "end"centerAligns along the trigger edge.
sideOffsetnumber4Distance from the trigger in pixels.
alignOffsetnumber0Offset along the alignment axis.
portalPropsPopoverPrimitive.Portal.Props—Native portal props including container and keepMounted.
PopoverTitlePopoverTitleProps—Styled native title with render.
PopoverDescriptionPopoverDescriptionProps—Styled native supporting text.
PopoverClosePopoverCloseProps—Native close button with styling and render.
PopoverCreateHandlePopoverPrimitive.createHandle—Creates a shared handle for detached triggers.
PopoverPrimitiveBase UI Popover—Native parts for custom composition.
PreviousMenuNextPreview Card