El Popover

Element Plus Popover Component

Display rich content in a popup, triggered by hover, click, focus, or contextmenu.

When to Invoke

Invoke this skill when:

• User needs to show rich content in a popup
• User wants to create nested operations
• User needs to display tables or forms in a popup
• User wants to trigger popup by click or hover
• User asks about virtual triggering

Features

• 9 Placements: Same as Tooltip
• Multiple Triggers: hover, click, focus, contextmenu
• Rich Content: Support for complex content like tables, forms
• Virtual Triggering: Separate trigger and content elements
• Nested Components: Can nest other components
• Customizable Width: Configurable width

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | trigger | How popover is triggered | 'click' \| 'focus' \| 'hover' \| 'contextmenu' \| Array | hover | | trigger-keys | Keyboard codes to control display | Array | ['Enter', 'Space'] | | title | Popover title | string | — | | effect | Tooltip theme | 'dark' \| 'light' | light | | content | Popover content | string | '' | | width | Popover width | string \| number | 150 | | placement | Popover placement | 'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end' | bottom | | disabled | Whether Popover is disabled | boolean | false | | visible / v-model:visible | Whether popover is visible | boolean \| null | null | | offset | Popover offset | number | undefined | | transition | Transition animation | string | — | | show-arrow | Whether arrow is displayed | boolean | true | | popper-options | popper.js parameters | object | {} | | popper-class | Custom class for popover | string | — | | popper-style | Custom style for popover | string \| object | — | | show-after | Delay of appearance (ms) | number | 0 | | hide-after | Delay of disappear (ms) | number | 200 | | auto-close | Timeout to hide (ms) | number | 0 | | tabindex | tabindex of Popover | number \| string | 0 | | teleported | Whether popover is teleported | boolean | true | | append-to | Which element popover appends to | CSSSelector \| HTMLElement | body | | persistent | Whether popover persists when inactive | boolean | true | | virtual-triggering | Whether virtual triggering is enabled | boolean | — | | virtual-ref | Reference element for virtual triggering | HTMLElement | — |

Slots

| Name | Description | Type | |------|-------------|------| | default | Content of popover | {hide: () => void} | | reference | HTML element that triggers popover | — |

Events

| Name | Description | Type | |------|-------------|------| | show | Triggers when popover shows | () => void | | before-enter | Triggers before entering transition | () => void | | after-enter | Triggers after entering transition | () => void | | hide | Triggers when popover hides | () => void | | before-leave | Triggers before leaving transition | () => void | | after-leave | Triggers after leaving transition | () => void |

Exposes

| Name | Description | Type | |------|-------------|------| | hide | Hide popover | () => void |

Usage Examples

Basic Usage

  
    
      Click to activate
    
  

Hover Trigger

  
    
      Hover to activate
    
  

Rich Content

  
    
      Click to see table
    
    
      
      
    
  

const tableData = [
  { name: 'Tom', address: 'No. 189, Grove St' },
  { name: 'Jack', address: 'No. 189, Grove St' }
]

Nested Operations

  
    
      Delete
    
    Are you sure to delete this?
    
      Cancel
      
        Confirm
      
    
  

import { ref } from 'vue'

const visible = ref(false)

With Form

  
    
      Open Form
    
    
      
        
      
      
        
      
      
        Submit
      
    
  

import { reactive } from 'vue'

const form = reactive({
  name: '',
  email: ''
})

const submitForm = () => {
  console.log('Form submitted:', form)
}

Virtual Triggering

  Trigger
  
  

import { ref } from 'vue'

const buttonRef = ref()

Controlled Visibility

  
    
      Toggle
    
  

import { ref } from 'vue'

const visible = ref(false)

Multiple Triggers

  
    
      Click or Hover
    
  

Custom Width

  
    
      Wide Popover
    
  

No Arrow

  
    
      No Arrow
    
  

Close from Content

  
    
      Click
    
    
      Click button to close
      Close
    
  

Common Issues

1. Popover Not Closing

Use hide function from slot:

  
    Close
  

2. Popover Position Issues

Use placement and fallback-placements:

3. Click Outside Not Closing

Set trigger="click":

Best Practices

1. Use appropriate trigger: Choose trigger based on use case
2. Set width: Set appropriate width for content
3. Close from content: Use hide function for custom close
4. Virtual triggering: Use for complex trigger scenarios
5. Controlled visibility: Use v-model:visible for programmatic control

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.