Popover

The <el-popover> component is used to display floating panels with arbitrary content — perfect for things like navigation menus and flyouts.

Component API

<el-popover>

Contains the content of the popover.

<el-popover-group>

Links related popovers to prevent them from closing when focus is moved between them.

Examples

Basic example

Use the <el-popover> component, along with a native <button>, to build a popover:

<button popovertarget="my-popover" type="button">
  Open popover
</button>

<el-popover popover id="my-popover">
  <!-- ... -->
</el-popover>

Toggling popovers

You can toggle popovers using the popovertarget attribute on the <button> along with the popover attribute on the <el-popover>:

<button popovertarget="my-popover" type="button">
  Open popover
</button>

<el-popover popover id="my-popover">
  <!-- ... -->
</el-popover>

You can also programmatically toggle popovers using the togglePopover() method:

<el-popover popover id="my-popover">
  <!-- ... -->
</el-popover>

<script type="module">
  const popover = document.getElementById('my-popover');
  popover.togglePopover();
</script>

Opening popovers

You can programmatically open popovers using the showPopover() method:

<el-popover popover id="my-popover">
  <!-- ... -->
</el-popover>

<script type="module">
  const popover = document.getElementById('my-popover');
  popover.showPopover();
</script>

Closing popovers

You can programmatically close popovers using the hidePopover() method:

<el-popover popover id="my-popover">
  <!-- ... -->
</el-popover>

<script type="module">
  const popover = document.getElementById('my-popover');
  popover.hidePopover();
</script>

Setting the panel width

The <el-popover> has no width set by default, but you can add one using CSS:

<el-popover popover class="w-52">
  <!-- ... -->
</el-popover>

If you'd like the panel width to match the <button> width, use the --button-width CSS variable that's exposed on the <el-popover> element:

<el-popover popover class="w-(--button-width)">
  <!-- ... -->
</el-popover>

Positioning the panel

Add the anchor prop to the <el-popover> to automatically position the panel relative to the <button>:

<el-popover popover anchor="bottom start">
  <!-- ... -->
</el-popover>

Use the values top, right, bottom, or left to center the panel along the appropriate edge, or combine it with start or end to align the panel to a specific corner, such as top start or bottom end.

To control the gap between the button and the panel, use the --anchor-gap CSS variable:

<el-popover popover anchor="bottom start" class="[--anchor-gap:4px]">
  <!-- ... -->
</el-popover>

Additionally, you can use --anchor-offset to control the distance that the panel should be nudged from its original position.

Adding transitions

To animate the opening and closing of the panel, target the data-closed, data-enter, data-leave, and data-transition attributes with CSS to style the different stages of the transition:

<el-popover popover class="transition transition-discrete data-closed:opacity-0 data-enter:duration-75 data-enter:ease-out data-leave:duration-100 data-leave:ease-in">
  <!-- ... -->
</el-popover>

Grouping related popovers

Use the <el-popover-group> component to group related popovers together. This ensures panels stay open while users are tabbing between popovers within a group, but closes any open panel once the user tabs outside of the group:

<el-popover-group>
  <button popovertarget="content-a" type="button">Menu A</button>
  <el-popover id="content-a" anchor="bottom start" popover>
    Content A
  </el-popover>

  <button popovertarget="content-b" type="button">Menu B</button>
  <el-popover id="content-b" anchor="bottom start" popover>
    Content B
  </el-popover>
</el-popover-group>