@mozaic-ds/vue/src/components/popover/README.md

Mozaic-Vue is the Vue.js implementation of ADEO Design system

# MPopover

A popover is a small overlay that appears above other content, typically triggered by a user interaction such as clicking or hovering over an element. It is used to display contextual information, additional actions, or interactive content without navigating away from the main interface. Popovers often include a title, description, and action buttons, and they automatically close when clicking outside or selecting an action.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `appearance` | Allows to define the popover appearance. | `"standard"` `"inverse"` | `"standard"` |
| `position` | Defines the preferred position of the popover relative to its activator. | `"bottom"` `"top"` `"left"` `"right"` | `"top"` |
| `pointer` | Controls the visibility of the popover pointer (arrow). | `boolean` | `true` |
| `size` | Sets the overall size of the popover. | `"s"` `"m"` `"l"` | `"s"` |
| `closable` | Displays a close icon button inside the popover.
Clicking the button will close the popover. | `boolean` | `true` |
| `title` | Title displayed at the top of the popover. | `string` | - |
| `description` | Supplementary text displayed below the title. | `string` | - |

## Slots

| Name | Description |
| --- | --- |
| `default` | Main content of the popover. |
| `activator` | Activator element that triggers the popover.
Must contain a single <button> or element with [type="button"] attribute.
Receives the popover `id` as a slot prop and must bind it
to the `popovertarget` attribute. |
| `footer` | Use this slot to insert buttons or link in the footer. |

## Dependencies

### Depends on

- [MIconButton](../iconbutton)

### Graph

```mermaid
graph TD;
  MPopover --> MIconButton
style MPopover fill:#008240,stroke:#333,stroke-width:4px
```