Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsPopover
Designer doc
Popover component is a versatile popup that combines the best of Tooltip and Balloon components, offering rich content display with flexible interaction modes.
Example
Basic Usage
A simple popover with title, content, and actions:
View code
Hover Trigger
Use trigger={PopoverTrigger.Hover} for Tooltip-like behavior with rich content. This is perfect for displaying detailed information without requiring clicks:
View code
Close on Blur Behavior
The closeOnBlur prop controls how the popover behaves when focus moves away:
Balloon-like Behavior (closeOnBlur=true)
When closeOnBlur is true (default), the popover behaves like a Balloon - it closes when you click outside or tab away:
View code
Dialog-like Behavior (closeOnBlur=false)
When closeOnBlur is false, the popover stays open for more complex interactions, similar to a Dialog. Use PopoverClose to provide a close button:
View code
Placements
Control where the popover appears relative to the trigger element.
Set basis to null to let the popover grow to the content’s width. By default, basis is 360 (pixels).
View code
Controlled Popover
Control the popover’s open/close state programmatically:
View code
Relevant components
API
Popover
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| basis | number | 360 | Width of the popover |
| closeOnBlur | boolean | true | Dismiss popover when its blurred. Suggested to use tgt with PopoverTrigger.Click |
| container | HTMLElement | configs.getPortalContainer('Popover', 'container') | |
| content | ReactNode | ||
| focusOnOpen | boolean | trigger === PopoverTrigger.Click | Auto focus the popover inner elements when set to true |
| immediate | boolean | ||
| initialActive | boolean | ||
| offset | [number, number] | [0, 2] | |
| onActiveChange | (active: boolean) => void | ||
| onComponentBlur | () => void | Callback function that will be called when the whole Popover component is blurred. | |
| placement | Placements | top | |
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| shouldKeyDownReturn | (e: KeyboardEvent<HTMLDivElement>) => boolean | closeOnBlur ? isPrintableEvent : () => false | By default when closeOnBlur=true, the focus will return to the trigger element when the key down event is not printable. When closeOnBlur=false, the focus will be kept while typing printable characters in popover.(dialog like behavior) Use this prop if you want to change this behavior, the boolean returned from this function will decide if the key down event should return the focus to trigger element. |
| springConfig | Partial<AnimationConfig> | { tension: 720, mass: 0.5 } | |
| trigger | PopoverTrigger | click |
PopoverActions
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |
PopoverClose
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | neuFore2nd | Set color based on theme. If color is specified, that prop is used instead of this. |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | string | ||
| size | IconButtonSizes | ||
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants |
PopoverContent
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionElement | ReactNode | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| childrenContainerProps | HTMLAttributes<HTMLDivElement> |
PopoverTitle
| Prop name | Type | Default | Description |
|---|---|---|---|
| actionElement | ReactNode | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. |