Popover - Semi Design Next

When to Use

When the target element has further description and related operations, it can be included in the card and displayed according to the user's operational behavior.

The difference with Tooltip is that users can operate on elements on the floating layer, so it can carry more complex content, such as links or buttons.

Demos

How to import

<script setup lang="ts">
    import { Popover } from '@fibrous/semi-ui-vue';
</script>

Cautions

Popover applies the trigger attributes and event listeners to the trigger element in the default slot, and uses the real DOM element of the trigger to calculate the position of the popup layer, so the default slot supports the following types:

A single real DOM element, such as span, div, p...
A single component, whose undeclared attributes must land on its root DOM element (the default attrs fallthrough is enough); for a component with several root nodes, its first element is the anchor
Text or several nodes, which Popover wraps in a span as the trigger element

Component

Text DOM

Code

<script setup lang="ts">
    import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-vue';
    import { Empty, Popover, Space, Tag } from '@fibrous/semi-ui-vue';

    const style = {
        border: '2px solid var(--semi-color-border)',
        paddingLeft: '4px',
        paddingRight: '4px',
        borderRadius: '4px',
    };
    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <Space>
        <Popover>
            <Tag :style="style">Component</Tag>
            <template #content>
                <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                    <template #image>
                        <IllustrationSuccess :style="imageStyle" />
                    </template>
                    <template #darkModeImage>
                        <IllustrationSuccessDark :style="imageStyle" />
                    </template>
                    <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                </Empty>
            </template>
        </Popover>
        <Popover>
            Text
            <template #content>
                <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                    <template #image>
                        <IllustrationSuccess :style="imageStyle" />
                    </template>
                    <template #darkModeImage>
                        <IllustrationSuccessDark :style="imageStyle" />
                    </template>
                    <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                </Empty>
            </template>
        </Popover>
        <Popover>
            <span :style="style">DOM</span>
            <template #content>
                <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                    <template #image>
                        <IllustrationSuccess :style="imageStyle" />
                    </template>
                    <template #darkModeImage>
                        <IllustrationSuccessDark :style="imageStyle" />
                    </template>
                    <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                </Empty>
            </template>
        </Popover>
    </Space>
</template>

Basic Usage

Put the trigger in the default slot of Popover (the trigger is a Tag in the example below) and pass the popup content through the #content slot.
The cautions are the same as Tooltip

悬停此处

Code

<script setup lang="ts">
    import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-vue';
    import { Empty, Popover, Tag } from '@fibrous/semi-ui-vue';

    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <Popover>
        <Tag>悬停此处</Tag>
        <template #content>
            <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                <template #image>
                    <IllustrationSuccess :style="imageStyle" />
                </template>
                <template #darkModeImage>
                    <IllustrationSuccessDark :style="imageStyle" />
                </template>
                <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
            </Empty>
        </template>
    </Popover>
</template>

Pop-up Position

Support twelve directions.

Top

Left

Right

Bottom

Code

<script setup lang="ts">
    import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-vue';
    import { Empty, Popover, Tag, type Position } from '@fibrous/semi-ui-vue';

    const tops: [Position, string][] = [
        ['topLeft', 'TL'],
        ['top', 'Top'],
        ['topRight', 'TR'],
    ];
    const lefts: [Position, string][] = [
        ['leftTop', 'LT'],
        ['left', 'Left'],
        ['leftBottom', 'LB'],
    ];
    const rights: [Position, string][] = [
        ['rightTop', 'RT'],
        ['right', 'Right'],
        ['rightBottom', 'RB'],
    ];
    const bottoms: [Position, string][] = [
        ['bottomLeft', 'BL'],
        ['bottom', 'Bottom'],
        ['bottomRight', 'BR'],
    ];
    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <div>
        <div :style="{ marginLeft: '80px', whiteSpace: 'nowrap' }">
            <Popover v-for="[position, label] in tops" :key="position" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px' }">{{ label }}</Tag>
                <template #content>
                    <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                        <template #image>
                            <IllustrationSuccess :style="imageStyle" />
                        </template>
                        <template #darkModeImage>
                            <IllustrationSuccessDark :style="imageStyle" />
                        </template>
                        <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                    </Empty>
                </template>
            </Popover>
        </div>
        <div :style="{ width: '80px', float: 'left' }">
            <Popover v-for="[position, label] in lefts" :key="position" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px', width: '60px' }">{{ label }}</Tag>
                <template #content>
                    <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                        <template #image>
                            <IllustrationSuccess :style="imageStyle" />
                        </template>
                        <template #darkModeImage>
                            <IllustrationSuccessDark :style="imageStyle" />
                        </template>
                        <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                    </Empty>
                </template>
            </Popover>
        </div>
        <div :style="{ width: '40px', marginLeft: '300px' }">
            <Popover v-for="[position, label] in rights" :key="position" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px', width: '60px' }">{{ label }}</Tag>
                <template #content>
                    <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                        <template #image>
                            <IllustrationSuccess :style="imageStyle" />
                        </template>
                        <template #darkModeImage>
                            <IllustrationSuccessDark :style="imageStyle" />
                        </template>
                        <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                    </Empty>
                </template>
            </Popover>
        </div>
        <div :style="{ marginLeft: '80px', clear: 'both', whiteSpace: 'nowrap' }">
            <Popover v-for="[position, label] in bottoms" :key="position" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px', width: '60px' }">{{ label }}</Tag>
                <template #content>
                    <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                        <template #image>
                            <IllustrationSuccess :style="imageStyle" />
                        </template>
                        <template #darkModeImage>
                            <IllustrationSuccessDark :style="imageStyle" />
                        </template>
                        <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
                    </Empty>
                </template>
            </Popover>
        </div>
    </div>
</template>

Controlled Display

In this scenario, Popover's display is completely at the control of parameter visible, which can be used with v-model:visible.

受控显示

受控隐藏

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { IllustrationSuccess, IllustrationSuccessDark } from '@fibrous/semi-illustrations-vue';
    import { Empty, Popover, Radio, RadioGroup, type RadioValue } from '@fibrous/semi-ui-vue';

    const visible = ref<RadioValue | undefined>(0);
    const imageStyle = { width: '150px', height: '150px' };
</script>

<template>
    <Popover trigger="custom" :visible="visible === 1">
        <span :style="{ display: 'inline-block' }">
            <RadioGroup v-model="visible" type="button">
                <Radio :value="1">受控显示</Radio>
                <Radio :value="0">受控隐藏</Radio>
            </RadioGroup>
        </span>
        <template #content>
            <Empty :style="{ width: '400px', margin: '0 auto', display: 'flex', padding: '20px' }" title="先进的设计 / 研发协作方式">
                <template #image>
                    <IllustrationSuccess :style="imageStyle" />
                </template>
                <template #darkModeImage>
                    <IllustrationSuccessDark :style="imageStyle" />
                </template>
                <template #description>使用 Semi D2C 快速还原 Figma 设计稿，一键转代码</template>
            </Empty>
        </template>
    </Popover>
</template>

Conditional trigger (condition)

When :condition="false", Popover will not respond to hover/click/focus triggers (with trigger="custom", visible still decides); when condition changes from true to false, an open popup closes at once; with visible controlled it only emits update:visible and visibleChange(false), and the popup closes once the owner sets visible to false.

Code

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Button, Popover, Space, Switch, Typography } from '@fibrous/semi-ui-vue';

    const { Text } = Typography;
    const enabled = ref(true);
    const content = computed(() => `condition is ${enabled.value ? 'true' : 'false'}`);
</script>

<template>
    <Space align="center">
        <Text id="popover-condition-label">condition</Text>
        <Switch v-model="enabled" aria-labelledby="popover-condition-label" />
        <Popover :condition="enabled">
            <Button>Hover me</Button>
            <template #content>{{ content }}</template>
        </Popover>
        <Popover :condition="enabled" trigger="click">
            <Button>Click me</Button>
            <template #content>{{ content }}</template>
        </Popover>
    </Space>
</template>

Show Small Triangle

Popover also supports the display of a small triangle.

The floating layer in this mode has a default style that you can overwrite by passing the style parameters.

Top

Left

Right

Bottom

Code

<script setup lang="ts">
    import { Popover, Tag, type Position } from '@fibrous/semi-ui-vue';

    const tops: [Position, string][] = [
        ['topLeft', 'TL'],
        ['top', 'Top'],
        ['topRight', 'TR'],
    ];
    const lefts: [Position, string][] = [
        ['leftTop', 'LT'],
        ['left', 'Left'],
        ['leftBottom', 'LB'],
    ];
    const rights: [Position, string][] = [
        ['rightTop', 'RT'],
        ['right', 'Right'],
        ['rightBottom', 'RB'],
    ];
    const bottoms: [Position, string][] = [
        ['bottomLeft', 'BL'],
        ['bottom', 'Bottom'],
        ['bottomRight', 'BR'],
    ];
</script>

<template>
    <div class="tag-margin-right" :style="{ paddingLeft: '40px' }">
        <div :style="{ marginLeft: '40px', whiteSpace: 'nowrap' }">
            <Popover v-for="[position, label] in tops" :key="position" :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
        <div :style="{ width: '40px', float: 'left' }">
            <Popover v-for="[position, label] in lefts" :key="position" :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
        <div :style="{ width: '40px', marginLeft: '180px' }">
            <Popover v-for="[position, label] in rights" :key="position" :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
        <div :style="{ marginLeft: '40px', clear: 'both', whiteSpace: 'nowrap' }">
            <Popover v-for="[position, label] in bottoms" :key="position" :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
    </div>
</template>

Arrow Point at Center

Under the condition of showArrow=true, you can pass in arrowPointAtCenter=true so that the small triangle always points to the center of the element.

Top

Left

Right

Bottom

Code

<script setup lang="ts">
    import { Popover, Tag, type Position } from '@fibrous/semi-ui-vue';

    const tops: [Position, string][] = [
        ['topLeft', 'TL'],
        ['top', 'Top'],
        ['topRight', 'TR'],
    ];
    const lefts: [Position, string][] = [
        ['leftTop', 'LT'],
        ['left', 'Left'],
        ['leftBottom', 'LB'],
    ];
    const rights: [Position, string][] = [
        ['rightTop', 'RT'],
        ['right', 'Right'],
        ['rightBottom', 'RB'],
    ];
    const bottoms: [Position, string][] = [
        ['bottomLeft', 'BL'],
        ['bottom', 'Bottom'],
        ['bottomRight', 'BR'],
    ];
</script>

<template>
    <div class="tag-margin-right" :style="{ paddingLeft: '40px' }">
        <div :style="{ marginLeft: '40px', whiteSpace: 'nowrap' }">
            <Popover v-for="[position, label] in tops" :key="position" arrowPointAtCenter :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
        <div :style="{ width: '40px', float: 'left' }">
            <Popover v-for="[position, label] in lefts" :key="position" arrowPointAtCenter :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
        <div :style="{ width: '40px', marginLeft: '180px' }">
            <Popover v-for="[position, label] in rights" :key="position" arrowPointAtCenter :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
        <div :style="{ marginLeft: '40px', clear: 'both', whiteSpace: 'nowrap' }">
            <Popover v-for="[position, label] in bottoms" :key="position" arrowPointAtCenter :position="position" showArrow>
                <Tag>{{ label }}</Tag>
                <template #content>
                    <article>
                        Hi ByteDancer, this is a popover.
                        <br />
                        We have 2 lines.
                    </article>
                </template>
            </Popover>
        </div>
    </div>
</template>

Set Floating Layer Background Color

If you need to customize the background color or border color of the floating layer, please Be sure to set backgroundColor and borderColor properties in style separately. This enables the "small triangle" to apply the same background color and border color.

Colorful Popover

Code

<script setup lang="ts">
    import { Popover, Tag } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Popover
            aria-label="Colorful Popover"
            position="right"
            showArrow
            :style="{
                backgroundColor: 'var(--semi-blue-6)',
                borderColor: 'var(--semi-blue-6)',
                color: 'var(--semi-color-white)',
                borderWidth: '1px',
                borderStyle: 'solid',
            }"
            trigger="custom"
            visible
        >
            <Tag :style="{ backgroundColor: 'var(--semi-blue-6)', color: 'var(--semi-color-white)' }"> Colorful Popover </Tag>
            <template #content>
                <article :style="{ padding: '4px' }">Hi, Semi UI Popover.</article>
            </template>
        </Popover>
    </div>
</template>

The #content slot receives { initialFocusRef } as its scope. Bind it to the focusable DOM or component with :ref, and it will automatically focus at this position when the panel is opened.

Code

<script setup lang="ts">
    import { Button, Input, Popover, Space } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Popover trigger="click">
        <Button>click me</Button>
        <template #content="{ initialFocusRef }">
            <div :style="{ padding: '12px' }">
                <Space>
                    <Button>first focusable element</Button>
                    <Input :ref="initialFocusRef" placeholder="focus here" />
                </Space>
            </div>
        </template>
    </Popover>
</template>

Please refer to Use with Tooltip/Popconfirm

API Reference

Props

Property	Description	Type	Default
ariaLabel	aria-label of the popup when its role is dialog.	`string`	`semiGlobalDefault("Popover", "ariaLabel")`
ariaLabelledby	aria-labelledby of the popup when its role is dialog.	`string`	`semiGlobalDefault("Popover", "ariaLabelledby")`
ariaDescribedby	aria-describedby of the popup when its role is dialog.	`string`	`semiGlobalDefault("Popover", "ariaDescribedby")`
role	ARIA role of the popup. Omitted, it is dialog for the click, contextMenu and custom triggers and tooltip for the rest; pass presentation when the popup only belongs to another control, such as a combobox list.	`string`	`semiGlobalDefault("Popover", "role")`
autoAdjustOverflow	Whether the popup flips automatically when it would be clipped.	`boolean`	`semiDefault("Popover", "autoAdjustOverflow", true)`
visible	Whether the popup is shown, used with trigger custom and v-model:visible. When given, this value decides.	`boolean`	`semiGlobalDefault("Popover", "visible")`
position	Position of the popup relative to the trigger element, in twelve directions.	`Type`	`semiDefault("Popover", "position", "bottom")`
motion	Whether the popup is animated.	`boolean`	`semiDefault("Popover", "motion", true)`
mouseEnterDelay	Milliseconds before the popup shows after the pointer enters. Applies to the hover and focus triggers.	`number`	`semiGlobalDefault("Popover", "mouseEnterDelay")`
mouseLeaveDelay	Milliseconds before the popup hides after the pointer leaves. Applies to the hover and focus triggers; not less than mouseEnterDelay.	`number`	`semiGlobalDefault("Popover", "mouseLeaveDelay")`
trigger	When the popup shows. With custom, visible alone decides.	`"hover" \| "focus" \| "click" \| "custom" \| "contextMenu"`	`semiDefault("Popover", "trigger", "hover")`
contentClassName	Class name of the content card in the popup.	`string \| unknown[]`	`semiGlobalDefault("Popover", "contentClassName")`
showArrow	Whether the arrow is shown.	`boolean`	`semiDefault("Popover", "showArrow", false)`
spacing	Distance in pixels between the popup and the trigger. An object sets the horizontal and vertical distances. Omitted, it is 4 without an arrow and 10 with one.	`number \| { x: number; y: number; }`	`semiGlobalDefault("Popover", "spacing")`
stopPropagation	Whether click, mousedown and focus in/out events on the popup stop propagating.	`string \| boolean`	`semiGlobalDefault("Popover", "stopPropagation")`
arrowStyle	borderColor, backgroundColor and borderOpacity of the arrow. They follow backgroundColor and borderColor of the card style by default.	`ArrowStyle`	`semiGlobalDefault("Popover", "arrowStyle")`
arrowPointAtCenter	Whether the arrow points at the center of the trigger. Requires showArrow.	`boolean`	`semiGlobalDefault("Popover", "arrowPointAtCenter")`
prefixCls	Class prefix of the popup. A custom value drops the Popover styles.	`string`	`semiDefault("Popover", "prefixCls", cssClasses.PREFIX)`
closeOnEsc	Whether Esc closes the open popup. With trigger custom it only emits escKeyDown and the caller decides whether to close.	`boolean`	`semiDefault("Popover", "closeOnEsc", true)`
guardFocus	Whether Tab cycles inside the popup while focus is in it.	`boolean`	`semiDefault("Popover", "guardFocus", true)`
returnFocusOnClose	Whether focus returns to the trigger after Esc closes the popup.	`boolean`	`semiDefault("Popover", "returnFocusOnClose", true)`
clickToHide	Whether a click on the popup or anything inside it closes the popup.	`boolean`	`semiGlobalDefault("Popover", "clickToHide")`
disableArrowKeyDown	Whether the arrow keys on the trigger are prevented from moving focus into the popup.	`boolean`	`semiGlobalDefault("Popover", "disableArrowKeyDown")`
disableFocusListener	Whether keyboard focus is ignored when trigger is hover.	`boolean`	`semiGlobalDefault("Popover", "disableFocusListener")`
keepDOM	Whether the popup content stays mounted while closed.	`boolean`	`semiGlobalDefault("Popover", "keepDOM")`
condition	Whether the popup may be triggered. Only an explicit false disables the hover, click and focus triggers; with trigger custom, visible still shows the popup. Changing it from true to false closes an open popup at once; with a controlled visible it only emits update:visible and visibleChange(false), and the popup closes once the caller writes back.	`boolean`	`semiGlobalDefault("Popover", "condition")`

Events

Event	Description	Callback parameters
open	Emitted once per opening when the popup is shown, as its enter animation starts, before afterOpen, controlled or not; not emitted for a hover open withdrawn because the pointer already left.	`[]`
update:visible	Emitted when the popup should show or hide, for v-model:visible to write back.	`[visible: boolean]`
visibleChange	Emitted when the visibility of the popup changes; with a controlled visible it reports only requests from user interaction, not changes the parent makes to visible.	`[visible: boolean]`
clickOutSide	Emitted when the mouse is pressed outside of the trigger and the open popup. Only for trigger click, contextMenu or custom.	`[event: MouseEvent]`
escKeyDown	Emitted when Esc is pressed while the popup is open and closeOnEsc is true.	`[event: KeyboardEvent]`
afterOpen	Emitted after the popup has opened and its enter animation has finished, or right after opening when there is no enter animation, controlled or not; not emitted for an open that is closed before the enter animation ends.	`[]`
afterClose	Emitted after the popup has closed and its leave animation has finished.	`[]`

Slots

Slot	Description	Scope parameters
default	The trigger. A single element or component receives the trigger attributes directly; text or several nodes are wrapped in a span.	`any`
content	Card content. The scope parameter initialFocusRef binds to the element that receives focus when the popup opens.	`Type`

Exposes

Name	Description	Type
focusTrigger	Focuses the trigger element. Only works when returnFocusOnClose is true and trigger is not custom.	`Type`
rePosition	Recomputes the popup position from the trigger's current position at once. The popup already follows scrolling, window resizing, trigger moves and size changes of the trigger or popup, so this is rarely needed; following a trigger move lands a frame late, so call this to align within the same frame.	`Type`

class and style land on the popup layer, and other undeclared attributes are dropped; the trigger attributes are only added to the trigger element. When the subtree is cached by <KeepAlive> (deactivated), the popup is treated as closed and update:visible and visibleChange are emitted with false; a popup whose visible is one-way bound to true is hidden with the cached subtree and shows again once reactivated.

Accessibility

ARIA

About role
- If the trigger is set to click, contextMenu or custom, the PopoverContent element has role set to dialog.
- If the trigger is set to hover or focus, it has role set to tooltip.
- The role prop overrides the default. A dialog needs a name: pass aria-label, or point aria-labelledby at a heading in the content; an unnamed dialog logs a warning in development
Popover's content
- The content wrapper will be automatically added with the id attribute
Popover's children (for a tooltip they only get aria-describedby; for other roles, such as presentation, nothing is added)
- Will be automatically added aria-expanded attribute, when Popover is visible, the attribute value is true, when invisible Is false
- Will be automatically added aria-haspopup attribute, which is dialog
- Will be automatically added aria-controls attribute, which is the id of the content wrapper

Keyboard and Focus

When the Popover trigger method is set to hover: Open the Popover when the mouse is hovered or focused
When the Popover trigger method is set to click: Click the trigger or focus and use the Enter key to open the Popover
After the Popover is activated, press the arrow key ⬇️ to move the focus to the Popover. At this time, the focus is on the first interactive element in the Popover by default, and the user can also customize the focus position (if there is no interactive element in the Popover, it will appear as No response)
Use the Tab key when the focus is in the Popover, the focus will cycle in the Popover, and use Shift + Tab to move the focus in the opposite direction
Keyboard users can close the Popover by pressing Esc, after closing the focus returns to the trigger (when the trigger is click)

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-popover-out	100ms	popover-显示及收起动画-动画持续时间
$animation_function-popover-out	cubic-bezier(0.215, 0.61, 0.355, 1)	popover-显示及收起动画-动画插值函数
$horizontal-rate-popover	0.24	水平方向矫正因子
$color-popover_arrow-icon-default	unset	箭头图标
$color-popover-bg-default	var(--semi-color-bg-3)	默认背景色
$color-popover-border-default	var(--semi-color-border)	默认描边颜色
$color-popover-arrow-border	var(--semi-color-border)	箭头描边颜色
$color-popover-arrow-bg	var(--semi-color-bg-3)	箭头默认背景色
$width-popover_arrow	24px	水平箭头宽度
$height-popover_arrow	8px	水平箭头高度
$height-popover_arrow_vertical	24px	垂直箭头高度
$width-popover_arrow_vertical	8px	垂直箭头宽度
$width-popover_title-border	1px
$spacing-popover_title-padding	8px	气泡卡片标题内边距
$spacing-popover_withArrow-padding	12px	带箭头的气泡卡片标题内边距
$spacing-popover_arrow_adjusted_offset-y	6px	垂直方向上的校正偏移量，主要修正三角形有棱角的问题
$spacing-popover_arrow_adjusted_offset-x	math.round($horizontal-rate-popover * $width-popover_arrow)	水平方向上的校正偏移量，主要修正三角形有棱角的问题
$radius-popover	var(--semi-border-radius-medium)	气泡卡片的圆角大小
$filter-popover-bg	none

FAQ

Why the position of the popover overlay card and the relative position of the overlay trigger are not as expected?
Popover relies on Tooltip at the bottom. In order to calculate positioning, Tooltip needs to obtain the real DOM elements of children. Therefore, the Popover type currently supports the following types of children:
1. A single real DOM element, such as span, div, p...
2. A single component, whose undeclared attributes must land on its root DOM element; for a component with several root nodes, its first element is the anchor
3. Text or several nodes, which Popover wraps in a span
When Semi Input with prefix is used as the trigger, even if the same width of Input and Popover content are set, the position of the floating card is still positioned relative to the input box that does not contain the prefix part. At this time, just put another div on the outer layer of the trigger to solve the problem.
Why does the popover layer card lose its width and wrap unexpectedly when the width is not enough near the screen border?

After Chromium 104, the wrapping rendering strategy when the width of the screen border text is not enough has changed. For details, see issue #1022, the semi-side has been This problem was fixed in v2.17.0.

When to Use

Demos

How to import

Cautions

Basic Usage

Pop-up Position

Controlled Display

Conditional trigger (condition)

Show Small Triangle

Arrow Point at Center

Set Floating Layer Background Color

Initialize the Focus Position of Popup Layer

Use with Tooltip or Popconfirm

API Reference

Accessibility

ARIA

Keyboard and Focus

Design Tokens

FAQ