Show · Popover
Popover
Click / mouse to move into the element and pop up the bubble card floating layer.

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

Basic Usage

Pop-up Position

Support twelve directions.

Controlled Display

In this scenario, Popover's display is completely at the control of parameter visible.

Show Small Triangle

Version: >= 0.19.0
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.

Arrow Point at Center

Version: >= 0.34.0
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.

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.

Initialize the Focus Position of Popup Layer

Popover content also supports functions. Its input parameter is an object, which binds initialFocusRef to the focusable DOM or component. When the panel is opened, it will automatically focus at that position.

Use with Tooltip or Popconfirm

API Reference

PropertiesInstructionsTypeDefaultVersion
autoAdjustOverflowWhether to automatically adjust the expansion direction of the floating layer for automatic adjustment of the expansion direction during edge occlusionbooleantrue
arrowPointAtCenterWhether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same timebooleantrue0.34.0
closeOnEscWhether to close the panel by pressing the Esc key in the trigger or popup layer. It does not take effect when visible is under controlledbooleantrue2.8.0
contentContent displayedstring | ReactNode
clickToHideWhether to automatically close the elastic layer when clicking on the floating layer and any element insidebooleanfalse0.24.0
disableFocusListenerWhen trigger is hover, does not respond to the keyboard focus popup event, see details at issue#977booleantrue2.17.0
getPopupContainerSpecifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set 'position: relative`() => HTMLElement() => document.body
guardFocusWhen the focus is in the popup layer, toggle whether the Tab makes the focus loop in the popup layerbooleantrue2.8.0
mouseEnterDelayAfter the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus)number50
mouseLeaveDelayThe time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus)number50
rePosKeyYou can update the value of this item to manually trigger the repositioning of the pop-up layerstring|number
returnFocusOnCloseAfter pressing the Esc key, whether the focus returns to the trigger, it only takes effect when the trigger is set to hover, focus, click, etcbooleantrue2.8.0
visibleDisplay popup or notboolean
positionDirections, optional values: top, topLeft, topRight, leftTop, leftBottom, rightTop, rightTop, rightBottom, bottomLeft, bottomRight, bottomRightstring"bottom"
spacingThe distance between the out layer and the children element, in pxnumber4(while showArrow=false) 10(while showArrow=true)
showArrowDisplay little arrow or notboolean
triggerTrigger mode, optional value: hover, focus, click, customstring'hover'
stopPropagationWhether to prevent click events on the bomb layer from bubblingbooleanfalse0.34.0
zIndexFloating layer z-index valuenumber1030
onClickOutSideCallback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)(e:event) => void2.1.0
onEscKeyDownCalled when Esc key is pressed in trigger or popup layerfunction(e:event)2.8.0
onVisibleChangeA callback triggered when the pop-up layer is displayed / hidden(isVisible: boolean) => void

Accessibility

ARIA

  • About role
    • If the trigger is set to clickcustom, the PopoverContent element has role set to dialog.
    • If the trigger is set to hover, it has role set to tooltip.
  • Popover's content
    • The content wrapper will be automatically added with the id attribute
  • Popover's children
    • 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

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 two types of children:
    1. The Jsx type of the real dom node, such as span, div, p...
    2. Use the FunctionComponent wrapped by forwardRef to pass props and ref to the real dom node
    When Semi Input with prefix is used as children, 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 children 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.

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED