# El Popover

> Popover component for displaying rich content in a popup. Invoke when user needs to show complex content, nested operations, or rich information in a popup.

- **Type:** Skill
- **Install:** `agentstack add skill-jiaiyan-element-plus-skills-el-popover`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jiaiyan](https://agentstack.voostack.com/s/jiaiyan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jiaiyan](https://github.com/jiaiyan)
- **Source:** https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-popover
- **Website:** https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

## Install

```sh
agentstack add skill-jiaiyan-element-plus-skills-el-popover
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```vue

  
    
      Click to activate
    
  

```

### Hover Trigger

```vue

  
    
      Hover to activate
    
  

```

### Rich Content

```vue

  
    
      Click to see table
    
    
      
      
    
  

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

```

### Nested Operations

```vue

  
    
      Delete
    
    Are you sure to delete this?
    
      Cancel
      
        Confirm
      
    
  

import { ref } from 'vue'

const visible = ref(false)

```

### With Form

```vue

  
    
      Open Form
    
    
      
        
      
      
        
      
      
        Submit
      
    
  

import { reactive } from 'vue'

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

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

```

### Virtual Triggering

```vue

  Trigger
  
  

import { ref } from 'vue'

const buttonRef = ref()

```

### Controlled Visibility

```vue

  
    
      Toggle
    
  

import { ref } from 'vue'

const visible = ref(false)

```

### Multiple Triggers

```vue

  
    
      Click or Hover
    
  

```

### Custom Width

```vue

  
    
      Wide Popover
    
  

```

### No Arrow

```vue

  
    
      No Arrow
    
  

```

### Close from Content

```vue

  
    
      Click
    
    
      Click button to close
      Close
    
  

```

## Common Issues

### 1. Popover Not Closing

Use `hide` function from slot:

```vue

  
    Close
  

```

### 2. Popover Position Issues

Use `placement` and `fallback-placements`:

```vue

```

### 3. Click Outside Not Closing

Set `trigger="click"`:

```vue

```

## 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](https://github.com/jiaiyan)
- **Source:** [jiaiyan/element-plus-skills](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jiaiyan-element-plus-skills-el-popover
- Seller: https://agentstack.voostack.com/s/jiaiyan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.