Popover

Use popover to bring attention to specific user interface elements and suggest an action or to guide users through a new experience.

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@momo-webplatform/mobase";

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

Popover component extends Radix Popover (opens in a new tab) component and supports all of its props.

Popover

PopoverTrigger

Prop	Type	Default	Required
`asChild`	enumboolean	--	false

PopoverContent

Prop	Type	Default	Required
`asChild`	enumboolean	--	false
`side`	enumtop \| right \| bottom \| left	--	false
`sideOffset`	number	4	false
`align`	enumcenter \| start \| end	center	false
`alignOffset`	number	--	false
`arrowPadding`	number	--	false
`avoidCollisions`	enumboolean	--	false
`collisionBoundary`	enumElement \| Element[]	--	false
`collisionPadding`	enumnumber \| Partial<Record<top \| right \| bottom \| left, number>>	--	false
`sticky`	enumpartial \| always	--	false
`hideWhenDetached`	enumboolean	--	false
`updatePositionStrategy`	enumalways \| optimized	--	false
`onEscapeKeyDown`	(event: KeyboardEvent) => void	--	false
`onPointerDownOutside`	(event: PointerDownOutsideEvent) => void	--	false
`onFocusOutside`	(event: FocusOutsideEvent) => void	--	false
`onInteractOutside`	(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void	--	false
`onOpenAutoFocus`	(event: Event) => void	--	false
`onCloseAutoFocus`	(event: Event) => void	--	false
`forceMount`	true	--	false

Use sparingly to avoid cognitive overload. Though they can be used for a variety of things, they should be used sparingly to avoid cognitive overload. It's important to consider the context in which the popover appears. Are there other popovers on the page? Does it appear on page load, or require the user to open the popover?
Unlike other messaging components, popovers should never include critical information (such as errors) and should always include a dismiss action.