Popover

Placement

Popover has 9 placements.

Use attribute content to set the display content when hover. The attribute placement determines the position of the Popover. Its value is [orientation]-[alignment] with four orientations top, left, right, bottom and three alignments start, end, null, and the default alignment is null. Take placement="left-end" for example, Popover will display on the left of the element which you are hovering and the bottom of the Popover aligns with the bottom of the element.

export function PopoverPlacement() {  return (    <div className={styles.placement}>      <div className={`${styles.row} ${styles.center}`}>        <ElPopover title="Title" content="Top Left prompts info" placement="top-start">          <ElButton>top-start</ElButton>        </ElPopover>        <ElPopover title="Title" content="Top Center prompts info" placement="top">          <ElButton>top</ElButton>        </ElPopover>        <ElPopover title="Title" content="Top Right prompts info" placement="top-end">          <ElButton>top-end</ElButton>        </ElPopover>      </div>      <div className={`${styles.row} ${styles.between}`}>        <ElPopover title="Title" content="Left Top prompts info" placement="left-start">          <ElButton>left-start</ElButton>        </ElPopover>        <ElPopover title="Title" content="Right Top prompts info" placement="right-start">          <ElButton>right-start</ElButton>        </ElPopover>      </div>      <div className={`${styles.row} ${styles.between}`}>        <ElPopover title="Title" content="Left Center prompts info" placement="left">          <ElButton style={{ margin: "12px 0" }}>left</ElButton>        </ElPopover>        <ElPopover title="Title" content="Right Center prompts info" placement="right">          <ElButton>right</ElButton>        </ElPopover>      </div>      <div className={`${styles.row} ${styles.between}`}>        <ElPopover title="Title" content="Left Bottom prompts info" placement="left-end">          <ElButton>left-end</ElButton>        </ElPopover>        <ElPopover title="Title" content="Right Bottom prompts info" placement="right-end">          <ElButton>right-end</ElButton>        </ElPopover>      </div>      <div className={`${styles.row} ${styles.center}`}>        <ElPopover title="Title" content="Bottom Left prompts info" placement="bottom-start">          <ElButton>bottom-start</ElButton>        </ElPopover>        <ElPopover title="Title" content="Bottom Center prompts info" placement="bottom">          <ElButton>bottom</ElButton>        </ElPopover>        <ElPopover title="Title" content="Bottom Right prompts info" placement="bottom-end">          <ElButton>bottom-end</ElButton>        </ElPopover>      </div>    </div>  );}

Basic usage

Popover is built with ElTooltip. So for some duplicated attributes, please refer to the documentation of Tooltip.

The trigger attribute is used to define how popover is triggered: hover, click, focus or contextmenu . If you want to manually control it, you can set :visible.

export function PopoverBasicUsage() {  const [visible, setVisible] = useState(false);  return (    <>      <ElPopover        placement="top-start"        title="Title"        width={200}        trigger="hover"        content="this is content, this is content, this is content"      >        <ElButton className={styles.m2}>Hover to activate</ElButton>      </ElPopover>      <ElPopover        placement="bottom"        title="Title"        width={200}        trigger="click"        content="this is content, this is content, this is content"      >        <ElButton className={styles.m2}>Click to activate</ElButton>      </ElPopover>      <ElPopover        placement="right"        title="Title"        width={200}        trigger="focus"        content="this is content, this is content, this is content"      >        <ElButton className={styles.m2}>Focus to activate</ElButton>      </ElPopover>      <ElPopover        title="Title"        width={200}        trigger="contextmenu"        content="this is content, this is content, this is content"      >        <ElButton className={styles.m2}>contextmenu to activate</ElButton>      </ElPopover>      <ElPopover        visible={visible}        placement="bottom"        title="Title"        width={200}        content="this is content, this is content, this is content"      >        <ElButton className={styles.m2} onClick={() => setVisible((value) => !value)}>          Manual to activate        </ElButton>      </ElPopover>    </>  );}

Virtual triggering

Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the triggering element and the content element, you should definitely use the mechanism, normally we use #reference to place our triggering element, with virtual-ref API you can set your triggering element anywhere you like, but notice that the triggering element should be an element that accepts mouse and keyboard event.

WARNING

v-popover is about to be deprecated, please use virtual-ref as alternative.

export function PopoverVirtualTriggering() {  const [buttonEl, setButtonEl] = useState<HTMLSpanElement | null>(null);  return (    <>      <span ref={setButtonEl} style={{ display: "inline-block" }}>        <ElButton>Click me</ElButton>      </span>      <ElPopover        virtualTriggering        virtualRef={buttonEl}        trigger="click"        title="With title"        content={<span>Some content</span>}      />    </>  );}

Rich content

Other components/elements can be nested in popover. Following is an example of nested table.

replace the content attribute with a default slot.

export function PopoverNestedInformation() {  return (    <div style={{ display: "flex", alignItems: "center" }}>      <ElPopover        placement="right"        width={400}        trigger="click"        content={          <ElTable data={gridData}>            <ElTableColumn width={150} prop="date" label="date" />            <ElTableColumn width={100} prop="name" label="name" />            <ElTableColumn width={300} prop="address" label="address" />          </ElTable>        }      >        <ElButton style={{ marginRight: 16 }}>Click to activate</ElButton>      </ElPopover>      <ElPopover        width={300}        popperStyle={{          boxShadow:            "rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px",          padding: 20,        }}        content={          <div style={{ display: "flex", gap: 16, flexDirection: "column" }}>            <ElAvatar              size={60}              src="https://avatars.githubusercontent.com/u/72015883?v=4"              style={{ marginBottom: 8 }}            />            <div>              <p style={{ margin: 0, fontWeight: 500 }}>Element Plus</p>              <p                style={{                  margin: 0,                  fontSize: 14,                  color: "var(--el-color-info)",                }}              >                @element-plus              </p>            </div>            <p style={{ margin: 0 }}>              Element Plus, a Vue 3 based component library for developers,              designers and product managers            </p>          </div>        }      >        <ElAvatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />      </ElPopover>    </div>  );}

Nested operation

Of course, you can nest other operations. It's more light-weight than using a dialog.

export function PopoverNestedOperation() {  const [visible, setVisible] = useState(false);  return (    <ElPopover      visible={visible}      placement="top"      width={180}      content={        <>          <p>Are you sure to delete this?</p>          <div style={{ textAlign: "right", margin: 0 }}>            <ElButton size="small" text onClick={() => setVisible(false)}>              cancel            </ElButton>            <ElButton              size="small"              type="primary"              onClick={() => setVisible(false)}            >              confirm            </ElButton>          </div>        </>      }    >      <ElButton onClick={() => setVisible(true)}>Delete</ElButton>    </ElPopover>  );}

Directive

You can still using popover in directive way but this is not recommended anymore since this makes your application complicated, you may refer to the virtual triggering for more information.

export function PopoverDirectiveUsage() {  const [buttonEl, setButtonEl] = useState<HTMLSpanElement | null>(null);  return (    <>      <span ref={setButtonEl} style={{ display: "inline-block" }}>        <ElButton>Click me</ElButton>      </span>      <ElPopover        virtualTriggering        virtualRef={buttonEl}        trigger="click"        title="With title"        persistent        content={<span>Some content</span>}      />    </>  );}

API

Attributes

Name	Description	Type	Default
trigger	how the popover is triggered, not valid in controlled mode	`enum` / `array`	hover
trigger-keys 2.9.8	When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of popover through the keyboard, not valid in controlled mode	`Array`	['Enter','Space']
title	popover title	`string`	—
effect	Tooltip theme, built-in theme: `dark` / `light`	`enum` / `string`	light
content	popover content, can be replaced with a default `slot`	`string`	''
width	popover width	`string` / `number`	150
placement	popover placement	`enum`	bottom
disabled	whether Popover is disabled	`boolean`	false
visible / v-model:visible	whether popover is visible	`boolean` / `null`	null
offset	popover offset, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12	`number`	undefined
transition	popover transition animation, the default is el-fade-in-linear	`string`	—
show-arrow	whether a tooltip arrow is displayed or not. For more info, please refer to ElPopper	`boolean`	true
popper-options	parameters for popper.js	`object`	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
popper-class	custom class name for popover	`string`	—
popper-style	custom style for popover	`string` / `object`	—
show-after	delay of appearance, in millisecond, not valid in controlled mode	`number`	0
hide-after	delay of disappear, in millisecond, not valid in controlled mode	`number`	200
auto-close	timeout in milliseconds to hide tooltip, not valid in controlled mode	`number`	0
tabindex	tabindex of Popover	`number` / `string`	0
teleported	whether popover dropdown is teleported to the body	`boolean`	true
append-to 2.9.10	which element the popover CONTENT appends to	`CSSSelector` / `HTMLElement`	body
persistent	when popover inactive and `persistent` is `false` , popover will be destroyed	`boolean`	true
virtual-triggering	Indicates whether virtual triggering is enabled	`boolean`	—
virtual-ref	Indicates the reference element to which the popover is attached	`HTMLElement`	—
tooltip	Inherits all attributes from Tooltip	—	—

Slots

Name	Description	Type
default	content of popover, version 2.13.4 and later can receive the hide parameter.	`object`
reference	HTML element that triggers popover, only a single root element is accepted	-

Events

Name	Description	Type
show	triggers when popover shows	`Function`
before-enter	triggers when the entering transition before	`Function`
after-enter	triggers when the entering transition ends	`Function`
hide	triggers when popover hides	`Function`
before-leave	triggers when the leaving transition before	`Function`
after-leave	triggers when the leaving transition ends	`Function`

Exposes

Name	Description	Type
hide	hide popover	`Function`