\r\n\r\n# vue3-popper\r\n\r\n> A popover component for Vue 3\r\n\r\n## Documentation\r\n\r\nCheck out the [documentation](https://valgeirb.github.io/vue3-popper/)\r\n\r\n- [Getting started](https://valgeirb.github.io/vue3-popper/guide/getting-started.html)\r\n- [Usage](https://valgeirb.github.io/vue3-popper/guide/getting-started.html#usage)\r\n\r\n## Install\r\n\r\n### NPM\r\n\r\n```bash\r\nnpm install vue3-popper\r\n```\r\n\r\n### Yarn\r\n\r\n```bash\r\nyarn add vue3-popper\r\n```\r\n\r\n## Usage\r\n\r\n### Vue environment\r\n\r\n```html\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n
This is the Popper content
\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n## Props\r\n\r\n| Name | Default | Description |\r\n| ------------------ | -------- | ----------------------------------------------------------------------------------------------------------- |\r\n| `placement` | `bottom` | Preferred placement of the Popper |\r\n| `disableClickAway` | `false` | Disables automatically closing the Popper when the user clicks away from it |\r\n| `offsetSkid` | `0` | Offset in pixels along the trigger element |\r\n| `offsetDistance` | `12` | Offset in pixels away from the trigger element |\r\n| `hover` | `false` | Trigger the Popper on hover |\r\n| `arrow` | `false` | Display an arrow on the Popper |\r\n| `arrowPadding` | `0` | Stop arrow from reaching the edge of the Popper (in pixels) |\r\n| `disabled` | `false` | Disables the Popper. If it was already open, it will be closed. |\r\n| `openDelay` | `0` | Open the Popper after a delay (ms) |\r\n| `closeDelay` | `0` | Close the Popper after a delay (ms) |\r\n| `interactive` | `true` | If the Popper should be interactive, it will close when clicked/hovered if false |\r\n| `content` | `null` | If your content is just a simple string, you can pass it as a prop |\r\n| `show` | `null` | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |\r\n| `zIndex` | `9999` | The z-index of the Popper |\r\n| `locked` | `false` | Lock the Popper into place, it will not flip dynamically when it runs out of space if this is set to `true` |\r\n\r\n## Events\r\n\r\n| Name | Description |\r\n| -------------- | ------------------------- |\r\n| `open:popper` | When the Popper is opened |\r\n| `close:popper` | When the Popper is hidden |\r\n\r\n## Slots\r\n\r\n| Name | Description |\r\n| --------- | ---------------------- |\r\n| `content` | For the Popper content |\r\n\r\n## Slot props\r\n\r\nThe `content` slot gives you access to useful variables and functions.\r\n\r\n| Name | Type | Description |\r\n| -------- | -------- | ------------------------------ |\r\n| `close` | function | A function to close the Popper |\r\n| `isOpen` | boolean | The `open` state of the Popper |\r\n\r\n## CSS variables\r\n\r\n`Popper` only comes with some barebones styling by default, but it also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.\r\n\r\n| CSS variable | Example value |\r\n| --------------------------------------- | ----------------------------------- |\r\n| `--popper-theme-background-color` | #ffffff |\r\n| `--popper-theme-background-color-hover` | #ffffff |\r\n| `--popper-theme-text-color` | inherit |\r\n| `--popper-theme-border-width` | 1px |\r\n| `--popper-theme-border-style` | solid |\r\n| `--popper-theme-border-color` | #eeeeee |\r\n| `--popper-theme-border-radius` | 6px |\r\n| `--popper-theme-padding` | 16px |\r\n| `--popper-theme-box-shadow` | 0 6px 30px -6px rgba(0, 0, 0, 0.25) |\r\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/valgeirb/vue-popper/main/docs/public/popper.svg\")
\r\n