vue-popper-lite

> A popover component based on popper-lite for Vue 3 support typescript

Example

$3

Vue SFC Playground

$3

Vue from CDN

Install

$3

``bash
npm install vue-popper-lite
`

$3

`bash
yarn add vue-popper-lite
`

$3

`bash
pnpm add vue-popper-lite
`

#### CDN

> Recommended: https://unpkg.com/vue-popper-lite, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popper-lite/

Usage

$3

`html







`

Props

| Name | Type | Default | Description |
|-----------------------|---------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| trigger | String | hover | Optional value:


• hover - hover to open popper content
• clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it
• clickToToggle - click on the popper toggles it's visibility
|
| placement | String | bottom | Preferred placement of the Popper |
| delay-on-mouse-over | Number | 10 | Delay in ms before showing popper during a mouse over |
| delay-on-mouse-out | Number | 10 | Delay in ms before hiding popper during a mouse out |
| disabled | Boolean | false | Disables the Popper. If it was already open, it will be closed. |
| content | String | null | If your content is just a simple string, you can pass it as a prop |
| transition | String | empty | Custom transition class |
| enter-active-class | String | null | Custom transition class enter |
| leave-active-class | String | null | Custom transition class leave |
| force-show | Boolean | false | Force show popper |
| append-to-body | Boolean | false | Append content to body |
| visible-arrow | Boolean | true | Visible an arrow on the Popper |
| arrow-padding | Number | 0 | Stop arrow from reaching the edge of the Popper (in pixels) |
| enable-flip | Boolean | true | Popper into place, it will not flip dynamically when it runs out of space if this is set to false |
| offset-kidding | Number | 0 | Offset in pixels along the trigger element |
| offset-distance | Number | 8 | Offset in pixels away from the trigger element |
| stop-propagation | Boolean | false | Stop propagation event click |
| prevent-default | Boolean | false | Prevent default event click |
| strategy | String | absolute | Describes the positioning strategy to use. If your reference element is in a fixed container, use the fixed strategy |
| content-class | String | empty | Class name for content element |

Events

| Name | Description |
|-------------------|--------------------------|
| created | Created popper component |
| show | Show popover |
| hide | Hide popover |
| document-click | |




Slots

| Name | Description |
|--------------|------------------------|
| default | For the Popper content |
| reference | For Trigger the Popper |

CSS variables

Popper also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.

| CSS variable | Example value |
|--------------------------------|-------------------------------------|
| --popper-background | #333333 |
| --popper-color | #ffffff |
| --popper-padding | 8px |
| --popper-radius | 4px |
| --popper-arrow-width | 8px |
| --popper-arrow-height | 8px |

Development Setup

` bash


install dependencies


pnpm install

build dist files


pnpm build

build dist files and types


pnpm prepublishOnly
``