Preview

Usage

<cs-popover header="Details" trigger-type="text">
  Show details
  <div slot="content">
    Here is the detailed content.
  </div>
</cs-popover>

Properties

dismiss-aria-labelstring default: 'Close'

Adds an aria-label to the dismiss button for accessibility.

dismiss-buttonboolean default: true

Determines whether the dismiss button is shown in the popover body.

fixed-widthboolean default: false

Expands the popover body to its maximum width regardless of content. For example, use it when you need to place a column layout in the popover content.

headerstring default: ''

Specifies optional header text for the popover.

positionPopoverProps.Position default: 'right'

Determines where the popover is displayed when opened, relative to the trigger. If the popover doesn't have enough space to open in this direction, it automatically chooses a better direction based on available space.

render-with-portalboolean

By default, the popover is constrained to fit inside its parent stacking context. Enabling this property will allow the popover to be rendered in the root stack context using React Portals. Enable this setting if you need the popover to ignore its parent stacking context, such as in side navigation.

Note: Using popover rendered with portal within a Modal is not supported.

sizePopoverProps.Size default: 'medium'

Determines the maximum width for the popover.

trigger-aria-labelstring default: ''

Adds aria-label to the text trigger button. Use this to provide an accessible name for triggers that don't have visible text, and to distinguish between multiple triggers with identical visible text.

trigger-typePopoverProps.TriggerType default: 'text'

Specifies the type of content inside the trigger region. The following types are available:

• text - Use for triggers containing inline components, like status indicator.
• text-inline - Use for triggers containing plain text only.
• custom - Use for the button component.

wrap-trigger-textboolean default: true

Specifies if the text trigger content should wrap. If you set it to false, it prevents the text from wrapping and truncates it with an ellipsis.

Slots

content

Content of the popover.

default

Element that triggers the popover when selected by the user.