> For the complete documentation index, see [llms.txt](https://bpio.gitbook.io/piman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bpio.gitbook.io/piman/vue2/popover.md).

# Popover

<div data-full-width="false"><figure><img src="/files/4Vv5HwUYHeur15Bz7tu0" alt="Popover 介紹示意圖"><figcaption></figcaption></figure></div>

Popover 彈出框，通常應用在呈現輔助資訊，例如畫面上空間不夠但是又必須呈現很多說明文字時，就可以使用此種元件。顯示時會懸浮於畫面上，蓋住部分原來網頁。

{% hint style="info" %}
使用 Popover 可以讓使用者的自由度比較大，若您想要讓使用者更專注在彈出框的情境，建議使用 Dialog 元件。
{% endhint %}

### 基本使用 <a href="#basic" id="basic"></a>

```html
<bpa-popover>content</bpa-popover>
```

### 大小 <a href="#size" id="size"></a>

```html
<bpa-popover size="small">small</bpa-popover>
```

### 主題色 <a href="#theme" id="theme"></a>

```html
<bpa-popover theme="primary">primary</bpa-popover>
```

### 沒有內距 <a href="#no-padding" id="no-padding"></a>

```markup
<bpa-popover nopadding>content</bpa-popover>
```

### 標題 <a href="#title" id="title"></a>

```html
<bpa-popover title="title">content</bpa-popover>
```

```html
<bpa-popover>
  <template v-slot:title>
    <mark>title</mark>
  </template>
  content
</bpa-popover>
```

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th width="136">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>id</td><td></td><td>String</td><td>random</td><td>false</td><td></td></tr><tr><td>theme</td><td><p>primary,</p><p>success,</p><p>warning,</p><p>danger,</p><p>primary-ghost,</p><p>success-ghost,</p><p>warning-ghost,</p><p>danger-ghost</p></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>title</td><td></td><td>String</td><td>'Popover'</td><td>false</td><td></td></tr><tr><td>nopadding</td><td></td><td>Boolean</td><td></td><td>false</td><td></td></tr><tr><td>size</td><td><p>small,</p><p>large</p></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>disabled</td><td></td><td>String, <br>Boolean</td><td></td><td>false</td><td></td></tr></tbody></table>

### Demo

{% embed url="<https://codesandbox.io/embed/piman-popover-3kflyb?fontsize=14&module=/src/App.vue&theme=dark>" fullWidth="false" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bpio.gitbook.io/piman/vue2/popover.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.